Задержка функции CSS в JQuery?

Question

Как я могу отложить изменение CSS в jquery? Вот мой код:

$("document").ready(function() { 
    $(".pressimage img").mouseenter(function() { 
     $jq(this).css('z-index','1000'); 
      }); 
    $(".pressimage img").mouseleave(1000,function() { 
     $jq(this).css('z-index','1'); 
      }); 
}); 

Мне нужна функция mouseleave, которая возникает около 1/2 секунды после ухода за мышью.

Я использую некоторые другие jquery, чтобы сделать изображения расширяющимися на мыши. Когда они расширяются, они покрывают друг друга, поэтому мне нужно, чтобы z-индекс анимированного изображения был выше, чем другой. Затем, когда мышь оставляет z-индекс, он должен вернуться в нормальное состояние.

Приведенный выше код работает, за исключением того, что z-index изменяется, как только мышь уходит, поэтому анимация не успевает закончить. Поэтому мне нужно немного отложить функцию mouseleave. Благодаря

UPDATE

Вот мой сайт: http://smartpeopletalkfast.co.uk/ppr6/press

Ive положил код в голову:

$jq("document").ready(function() { 

    $jq(".pressimage img").mouseenter(function() { 
     $jq(this).css('z-index','100'); 
      }); 

    $jq(".pressimage img").mouseleave(function() { 
     $jq(this).css('z-index','1'); 
      }); 

}); 

Этот код работает отлично, но не имеет каких-либо задержек. Если вы наведите курсор на верхнее левое изображение, оно отлично работает, но как только вы отключаете его, оно идет за изображение под ним. Thanks

Answer 1

Попробуйте это:

$(".pressimage img").mouseleave(function(){ 
    var that = this; 
    setTimeout(function(){ 
     $(that).css('z-index','1'); 
    },500); 
}); 

Answer 2

$("document").ready(function() { 
$(".pressimage img").mouseenter(function() { 
    $jq(this).css('z-index','1000'); 
     }); 
$(".pressimage img").mouseleave(1000,function() { 
    $jq(this).delay(500).css('z-index','1'); 
     }); 
}); 

Это работает? :)

Answer 3

http://jsfiddle.net/loktar/yK5ga/

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

$("document").ready(function() { 
    var imgTimeout; 

    $("img").hover(
     function() { 
      clearTimeout(imgTimeout); 
      $(this).css('z-index','1000'); 
    }, 
    function() { 
     var element = $(this); 
     imgTimeout = setTimeout(function(){element.css('z-index','1');}, 1000); 
    }); 
}); 

Answer 4

Вы можете сделать это с помощью setTimeout();

$("document").ready(function() { 
    var timer; 
    $(".pressimage img").mouseenter(function() { 
     $jq(this).css('z-index','1000'); 
     clearTimeout(timer); 
    }); 
    $(".pressimage img").mouseleave(1000,function() { 
     timer = setTimeout(function(){ 
      $jq(this).css('z-index','1'); 
     }, 500); 
    }); 
}); 

Код в SetTimeout (код, задержка) выполняется после задержки миллисекунд. У вас могут быть проблемы с непреднамеренными изменениями, если вы слишком быстро перемещаете мышь, поэтому я очистил действие таймаута на mouseenter().

Answer 5

Обратите внимание, что решение Санон в рассмотренном выше, является более естественным, чем этот, потому что он использует .queue метод JQuery вместо злоупотреблять .animate для той же цели.

Оригинальный ответ ниже:

---

SetTimeout является наиболее естественным способом пойти, но если вы хотите остаться в вашей функции цепи JQuery, вы можете использовать функцию анимации с длительностью 0.

Пример:

$("img").delay(1000).animate({'z-index': 1000},0) 

Если вы хотите сделать что-нибудь еще, чем числовые изменения CSS, то вам нужно создать функцию, но все еще может произойти в течение этого живого разговора:

$("img").delay(1000).animate({zoom:1},0,function(){$(this).src('otherImage.png');}) 

Я просто помещаю этот зум: 1 там, потому что если вы укажете пустой объект {} там, он не считается реальным эффектом, поэтому не идет в очередь эффектов, поэтому сразу выполняет полную функцию.

Answer 6

Попробуйте следующее.

jQuery.fn.extend({ 
    qcss: function(map){ 
     $(this).queue(function(next){ 
      $(this).css(map); 
      next(); 
     }); 

     return this; 
    } 
}); 

Answer 7

Delay работает только на элементах в очереди, так что вы должны добавить изменения CSS в очереди за задержку на работу. Затем разложите. Следующий код иллюстрирует это:

$('.pressimage img') 
    .delay(1000) 
    .queue(function(){ 
     $(this).css({'z-index','1'}); 
     $(this).dequeue(); 
    }); 

Answer 8

http://forum.jquery.com/topic/delay-css

проверен и работает на моем целью задержки свойства CSS после одушевленной.