Задержка функции 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 секунды после ухода мыши.

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

Приведенный выше код работает, за исключением того, что z-index изменяется, как только мышь уходит, поэтому анимация не успевает закончить. Поэтому мне нужно немного отложить функцию 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');
            });

});

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

Ответы

Ответ 1

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

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

Ответ 2

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

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

Ответ 3

Обратите внимание, что решение sanon выше является более естественным, чем это, потому что оно использует метод jQuery .queue вместо злоупотребления .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 там, потому что, если вы укажете пустой объект {} там, он не считается реальным эффектом, поэтому не идет в очередь на эффекты, поэтому немедленно выполняет полную функцию.

Ответ 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().

Ответ 5

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

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

Ответ 6

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

Ответ 7

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

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

        return this;
    }
});