Delay CSS function in Jquery?

Refresh

November 2018

Views

28k time

14

How can I delay a CSS change in jquery? Here is my code:

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

I need the mouseleave function to occur about 1/2 a second after the mouse leaves.

Im using some other jquery to make images expand on mouseover. When they expand they cover each other, so I need the z-index of the animated image to be higher than the other. Then when the mouse leaves the z-index has to return to normal.

The above code works except that the z-index changes as soon as the mouse leaves, so the animation doesn't have time to complete. I therefore need to delay the mouseleave function a bit. Thanks

UPDATE

Here is my site: http://smartpeopletalkfast.co.uk/ppr6/press

Ive put my code in the head:

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

});

This code is working fine but doesn't have any delay. If you hover over the top left image it works fine but as soon as you mouse off it goes behind the image below it. Thanks

8 answers

1

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

3

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

14

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

$('.pressimage img')
    .delay(1000)
    .queue(function(){
        $(this).css({'z-index','1'});
        $(this).dequeue();
    });
0
$("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

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

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

        return this;
    }
});
20

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

$(".pressimage img").mouseleave( function(){
    var that = this;
    setTimeout( function(){
      $(that).css('z-index','1');
    },500);
 });
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

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

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