jQuery Jquery中的延迟CSS功能？

Delay CSS function in Jquery?

提问by Evanss

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

如何延迟 jquery 中的 CSS 更改？这是我的代码：

$("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.

我需要 mouseleave 函数在鼠标离开后大约每秒 1/2 次发生。

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.

我使用其他一些 jquery 使图像在鼠标悬停时展开。当它们展开时，它们会相互覆盖，所以我需要动画图像的 z-index 高于另一个。然后当鼠标离开时 z-index 必须恢复正常。

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

上面的代码有效，只是 z-index 在鼠标离开时立即发生变化，因此动画没有时间完成。因此，我需要稍微延迟 mouseleave 功能。谢谢

UPDATE

更新

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

这是我的网站：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

此代码工作正常，但没有任何延迟。如果您将鼠标悬停在左上角的图像上，它可以正常工作，但是一旦您将鼠标移开，它就会在其下方的图像后面。谢谢

回答by Ken Redler

Try this:

尝试这个：

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

回答by sanon

Delay only works on items in the queue so you need to add your css change to the queue for the delay to work. Then dequeue. The following code illustrates this:

延迟仅适用于队列中的项目，因此您需要将 css 更改添加到队列以使延迟生效。然后出队。以下代码说明了这一点：

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

回答by Sygmoral

Note that sanon's solution above is more natural than this one because it uses jQuery's .queuemethod instead of abusing .animatefor the same purpose.

请注意，上面 sanon 的解决方案比这个更自然，因为它使用了 jQuery 的.queue方法，而不是.animate出于同样的目的而滥用。

Original answer below:

原答案如下：

---

---

setTimeout is the most natural way to go, but if you want to stay in your jQuery function chain, you can use an animate function with duration 0.

setTimeout 是最自然的方法，但如果你想留在你的 jQuery 函数链中，你可以使用持续时间为 0 的动画函数。

Example:

例子：

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

If you want to do anything else than numeric css changes, then you do need to create a function, but that can still happen within that animate call:

如果您想做除数字 css 更改之外的任何其他事情，那么您确实需要创建一个函数，但这仍然可以在该 animate 调用中发生：

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

I'm just putting that zoom:1 there because if you specify an empty object {} there, it is not considered a real effect, so doesn't go on the effects queue, so immediately executes the complete function.

我只是把那个 zoom:1 放在那里，因为如果你在那里指定一个空对象 {}，它不被认为是真正的效果，所以不会进入效果队列，所以立即执行完整的功能。

回答by Surreal Dreams

You can do this with setTimeout();

你可以用 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);
    });
});

The code in setTimeout(code, delay) executes after delaymilliseconds. You might have problems with unintended changes if you were to move the mouse about too quickly, so I have cleared the timeout action on mouseenter().

setTimeout(code, delay) 中的代码在延迟毫秒后执行。如果您将鼠标移动得太快，您可能会遇到意外更改的问题，因此我清除了 mouseenter() 上的超时操作。

回答by Bleh

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

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

tested and working for my purpose of delaying a css property following an animate.

测试和工作我的目的是在动画之后延迟 css 属性。

回答by funatti

Try the following.

请尝试以下操作。

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

        return this;
    }
});

回答by Milaan

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

Does this work? :)

这行得通吗？:)

回答by Loktar

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

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

Check that one out what I am doing is assigning the timeout to a variable and then clearing it on mouseover, so it wont fire if you do a mouse over quickly.

检查一下我正在做的是将超时分配给一个变量，然后在鼠标悬停时清除它，因此如果您快速悬停鼠标，它就不会触发。

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