在Jquery中延迟CSS功能? [英] Delay CSS function in Jquery?

问题描述

如何在jquery中延迟CSS更改?这是我的代码:

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

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

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

我正在使用其他一些jquery使图像在鼠标悬停时扩展.当它们展开时，它们会相互覆盖，因此我需要动画图像的z索引要高于其他图像.然后，当鼠标离开时，z索引必须恢复正常.

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.

上面的代码起作用，除了z-index随鼠标离开而改变之外，因此动画没有时间完成.因此，我需要稍微延迟mouseleave函数.谢谢

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

更新

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

推荐答案

尝试一下:

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

这篇关于在Jquery中延迟CSS功能?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！