在Jquery中延迟CSS函数？

Question

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

我需要在鼠标离开后大约1/2秒发生mouseleave功能.

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

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

UPDATE

这是我的网站: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();
    });