Задержка функции 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');
            });
});

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

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

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

ОБНОВЛЕНИЕ

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

Я положил свой код в голову:

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

});

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

Answer 1

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

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

Answer 2

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

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

Answer 3

Обратите внимание, что приведенное выше решение 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');})

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

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 (code, delay) выполняется после delay milliseconds.У вас могут быть проблемы с непреднамеренными изменениями, если вы слишком быстро перемещаете мышь, поэтому я удалил действие timeout для mouseenter ().

Answer 5

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

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

Answer 6

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

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

        return this;
    }
});

Answer 7

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

Убедитесь, что одним из моих назначений является присвоение времени ожидания переменной, а затем его очистка при наведении курсора, поэтому оно не сработает, если быстро навести курсор мыши.1005 *

Answer 8

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

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