Функция задержки JQuery не будет работать

Question

Я пытаюсь сделать задержку между анимацией и переключением между скрытым и видимым из коробки, код работает отлично без функции задержки (но все загружается сразу), я делаю функцию задержки неправильно?http://jsfiddle.net/qWszS/2/

Answer 1

.delay() влияет только на операции, которые используют очередь анимации для этого конкретного объекта. Это не влияет на методы этого объекта, которые не используют очередь анимации, и не влияет на другие строки кода, следующие за этим, которые работают с другими объектами.

В забавной причуде jQuery .hide() или .show() не использует очередь анимации, поэтому она не работает с .delay(), но .hide(1) или .hide("slow") использует очередь анимации, поэтому она будет работа с .delay().

Таким образом, чтобы задерживать операции над другими объектами на фиксированный промежуток времени, вы, вероятно, захотите использовать setTimeout для планирования операций на будущее время. Чтобы упорядочить операции так, чтобы они начинались, когда завершается эта, используйте функцию завершения для первой операции.

Не совсем понятно, что вы пытаетесь сделать, но этот переписанный код решит ряд проблем:

1. Объединены все операции скрытия в один селектор.

2. Добавлено время в setTimeout, так что они представляют собой задержку после скрытия перед запуском анимации (поскольку кажется, что вы хотели тайм-аут там)

3. Вместо .delay () я использую функцию завершения анимации для запуска следующего действия.

Вот код:

$(".go1").click(function(event){
    event.preventDefault(); // prevent the link from changing the location
    $(".go2, .go3, .go4, .go5, .go6").hide("slow");
    setTimeout(function() {
        var done = false;
        $(".go1").animate({top: "0", left: '60%'}, "slow");}, 1500, function() {
            // completion function is call once for each object animating
            // make sure we only execute our code once
            if (!done) {
                $(".hide").css("visibility", "visible", 1000)
                $(".transbox").css("visibility","visible");
                done = true;
            {
        });
    }, 1000);
});

Основываясь на ваших комментариях, вот значительно более простая форма кода, которая показывает прямоугольник и кнопку скрытия после завершения анимации. Этот фрагмент кода (в сочетании с некоторыми изменениями в вашем HTML) заменяет весь код, который вы имели в скрипте:

$(".go").click(function(event){
    event.preventDefault();
    $(".go").not(this).hide("slow");
    $(this).animate({top: "0", left: '60%'}, "slow", function() {
        $(".transbox, .hide").css("visibility","visible");
    });
});

jsFiddle здесь: http://jsfiddle.net/jfriend00/aKDgH/

Если вам нужна дополнительная задержка, прежде чем появится окно, вы можете изменить код на это и настроить значение времени setTimeout по своему вкусу:

$(".go").click(function(event){
    event.preventDefault();
    $(".go").not(this).hide("slow");
    $(this).animate({top: "0", left: '60%'}, "slow", function() {
        setTimeout(function() {$(".transbox, .hide").css("visibility","visible");}, 1000);
    });
});

jsFiddle здесь: http://jsfiddle.net/jfriend00/aKDgH/9/

Answer 2

У вас есть ряд проблем с вашим кодом.Я внес в него некоторые изменения, которые должны сделать то же самое:

$(".go1").click(function(event){
    event.preventDefault();
    $(".go2, .go3, .go4, .go5, .go6").hide("slow");
    $(".go1").animate({top: "0", left: '60%'}, "slow").delay(2000).queue(function() {
       $(".hide, .transbox").css("visibilty", "visible");
    });
});

• Вы не установили время для setTimout, поэтому я удалил его.Вы можете добавить его обратно, если хотите запустить анимацию и показать элементы позже.

• Я выбрал .go2 - .go6 с помощью одного селектора.

Редактировать: Внесены некоторые исправления в пример.

Answer 3

Вы устанавливаете тайм-аут без времени!

setTimeout(function() {

   $(".go1").animate({top: "0", left: '60%'}, "slow");},1500);
   $(".hide").css("visibility", "visible", 1000);
   $(".transbox").css("visibility","visible");


}, 2000); //time!

Answer 4

задержка задерживает выполнение следующих действий в очереди, и вы установили его как последнее действие.Установите перед .animate, и анимация будет задержана.