Jquery中的延迟CSS函数？

如何延迟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');
            });
});

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

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

上面的代码可以正常工作，但z索引会在鼠标离开后立即更改，因此动画没有时间完成。因此，我需要稍微延迟mouseleave功能。谢谢

更新

这是我的网站：

我把我的代码放在头上：

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

});

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

这行吗？：）

检查一下，我正在做的是将超时指定给一个变量，然后在mouseover上清除它，这样，如果你快速移动鼠标，它就不会触发

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

---

您可以使用setTimeout（）执行此操作

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

尝试以下操作：

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

---

请注意，上面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');})

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

试试下面的方法。

---

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

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

---

为了在动画之后延迟css属性，我进行了测试和工作。

奇怪。。除非有人提出更好的/不同的答案，否则我会回避的。这对我不起作用。看起来应该是这样的。我会有一个游戏，并上传一个版本显示，如果必要的话。我仔细看了看。当我使用您的代码时，问题是其中一个图像（我链接中左下角的一个）最初可以工作，但当z索引恢复为1时，它保持为1000。其他一些解决方案也出现了同样的情况。谢天谢地：（但幸运的是，上述答案应该有效：）好的，我会进一步研究。谢谢你的方法在几次悬停后就停止工作了。就像Loktar的一样，我在其中添加了一个clearTimeout（），以在发生快速鼠标进入/离开事件时停止设置的超时。当我将鼠标悬停在图像上时，z索引变为1000，但在mouseleave上，它不会变回1。谢谢，我一定是打错了什么的。我看到你有一个有效的解决方案，所以+1对那个家伙：）谢谢-这解决了我的问题

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

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

        return this;
    }
});

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