Функция задержки CSS в Jquery?

Как я могу отложить изменение 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 секунды после ухода мыши.

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

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

обновление

вот мой сайт: 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');
            });

});

этот код работает нормально, но не имеет задержки. Если вы наведете курсор на верхнее левое изображение, оно будет работать нормально, но как только вы нажмете кнопку мыши, оно останется позади изображение под ним. Спасибо

14
delay jquery

8 ответов

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

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

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

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

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

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

setTimeout-самый естественный способ, но если вы хотите остаться в цепочке функций jQuery, вы можете использовать функцию animate с длительностью 0.

пример:

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

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

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

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

3

вы можете сделать это с помощью 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().

1
$("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');
        });
});

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

0

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); 
    });
});
0

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

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

        return this;
    }
});
0

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

протестировано и работает для моей цели задержки свойства css после анимации.

0