Панель jQuery опускается, затем поднимается при загрузке страницы

#jquery #delay #slidedown #slideup

#jquery #задержка #slidedown #скольжение вверх

Вопрос:

Предполагается, что это очень просто, однако я просто не могу заставить это работать так, как должно.

Следующий код должен быть способен выполнять следующее. Как только страница завершит загрузку, div (div#panel) в верхней части страницы должен прокручиваться вниз, чтобы ее можно было увидеть. После задержки в несколько секунд div должен прокручиваться обратно из вида. Div также должен иметь возможность переключаться / скользить вверх и вниз, когда пользователь нажимает на триггер.

Заранее спасибо за советы / предложения.

 $(document).ready(function() {

    $("div#panel").slideDown("slow");
    setTimeout(function(){ 
    $("div#panel").slideUp("slow"); 
    }, 5000);

});

$(document).ready(function() {

    // Expand Panel
    $("#open").click(function(){
        $("div#panel").slideDown("slow");
    }); 

    // Collapse Panel
    $("#close").click(function(){
        $("div#panel").slideUp("slow"); 
    });         
});

Ответ №1:

Сначала вы должны hide() открыть панель, чтобы она могла скользить в поле зрения.

 $(document).ready(function(){
    $("div#panel").hide();

    var autoTimer = null;

    autoTimer = setTimeout(function(){
        $("div#panel").slideDown("slow");
        autoTimer = setTimeout(function(){
            $("div#panel").slideUp("slow");
        }, 5000);
    },2000);

    $("#open").click(function(){
        $("div#panel").slideDown("slow");
        if(autoTimer) clearTimeout(autoTimer);
        autoTimer = null;
    });

    $("#close").click(function(){
        $("div#panel").slideUp("slow");
        if(autoTimer) clearTimeout(autoTimer);
        autoTimer = null;
    });         
});

Демонстрация: http://jsfiddle.net/X9Vn4/6 /

1. Блестяще! Кажется, это правильный путь. Однако div скользит вниз до завершения загрузки страницы. Немного поиграем и посмотрим, что можно сделать……

2. В этом случае вы можете поместить биты автоматического скольжения в функцию загрузки: $(document).load(function(){...}); . Это сработает только после завершения загрузки всей вашей страницы, включая изображения.

3. DarthJDG — это имеет смысл, однако, поскольку это сайт WordPress, к сожалению, это немного сложнее. Может быть, есть способ использовать. задержка()? Я пробовал, но безрезультатно…

4. Я не понимаю, почему привязка к событию загрузки не будет работать на сайте WordPress, но если вы просто хотите сделать фиксированную задержку, вы можете перенести код автоматического сдвига на другой тайм-аут следующим образом: jsfiddle.net/X9Vn4/3

5. delay() более элегантно для чистой анимации, но могут быть причины, по которым вы хотите отменить тайм-аут, например, если пользователь начнет играть с кнопками открытия / закрытия, вы можете не захотеть автоматически открывать / закрывать. Из-за ошибки в jQuery возникают проблемы с остановкой отложенных анимаций, так что clearTimeout() должно быть правильно. Я отредактировал свой пост, теперь он отменяет автоматическое скольжение, если пользователь вручную открыл / закрыл панель.

Ответ №2:

Вы также могли бы попробовать это. Загружайте slideUp, когда slideDown завершает выполнение.

 $('#id').slideDown(500, function(){
   setTimeout(function(){$('#id').fadeOut(500)}, 1500);
});

Ответ №3:

 Try this :
$(document).ready(function(){
   setTimeout('slide_div()',5000);
  $('#open').click(function(){
      $('#pane1').slideDown('slow');
  });

  $('#close').click(function(){
      $('#pane1').slideUp('slow');
  });
});

function slide_div()
{
   $('#pane1').slideToggle();
 }