延遲CSS功能不起作用

Question

我試圖延遲CSS功能。這是我的網站： http://smartpeopletalkfast.co.uk/ppr6/press

當您將鼠標懸停在左上方的圖像上時，它會展開以覆蓋下方的圖像。香港專業教育學院使用下面的代碼（它在頁頭），以改變它的z索引因此，這是擴大圖像總是可見於任何其他：

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

此代碼的工作，但只要你鼠標關閉它的z-index變化的圖像，所以它不會保持可見，而其大小調整回縮略圖。我需要的是z-index在動畫完成後返回到1，或者z-index更改爲延遲約1/2秒。我想第二個解決方案會更簡單。

我嘗試使用以下，它只設置Z-指數爲100，但從來沒有把它回到1

$("document").ready(function() { 
    var timer; 
    $(".pressimage img").mouseenter(function() { 
     $(this).css('z-index','100'); 
     clearTimeout(timer); 
    }); 
    $(".pressimage img").mouseleave(1000,function() { 
     timer = setTimeout(function(){ 
      $(this).css('z-index','1'); 
     }, 500); 
    }); 
}); 

感謝

更新。我在這裏張貼這個，因爲你不能在評論中看到代碼。這是我的實際代碼與您的建議。 jq用於避免jquery版本衝突，它對我網站上的其他js正常工作。

$jq("document").ready(function() { 
    $jq(".pressimage img").mouseenter(function() { 

     $jq(this).stop().animate({ 
      width: 260 
      }); 
    }); 
    $jq(".pressimage img").mouseleave(function() { 
     $jq(this).stop().animate({ 
      width: 130 
      }); 
    }); 
}); 


$jq("document").ready(function() { 
    var timer; 
    $jq(".pressimage img").mouseenter(function() { 
     $jq(this).css('z-index','100'); 
     clearTimeout(timer); 
    }); 
    $jq(".pressimage img").mouseleave(1000,function() { 
     var that = $jq(this); 
     timer = setTimeout(function(){ 
      that.css('z-index','1'); 
     },  500); 
    }); 
}); 

代碼現在工作的大部分，但有時確實留下影像與100 感謝

Answer 1

肯Redler在這裏找到答案：

Delay CSS function in Jquery?

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

Answer 2

裏面的setTimeout $（本）的z索引將不參考的元素。在超時函數之外引用此參數，並在函數內部引用該參考。

http://jsfiddle.net/yK5ga/2/

第一個答案將其更改爲

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

我確實有它從昨天爵士小提琴，也許是被忽視，因爲我真的沒有做的好，因爲我可以的格式化。

回答更新

你試過將它們合併爲同一功能，像這樣？

http://jsfiddle.net/yK5ga/3/

，因爲它現在站在你有相同的情況下做不同的事情連接到相同的元素。

更新代碼

$("document").ready(function() { 
    var timer; 
    $("img").mouseenter(function() { 

     $(this).stop().animate({ 
      width: 260 
     }); 

     $(this).css('z-index','100'); 
     clearTimeout(timer); 
    }); 
    $("img").mouseleave(1000,function() { 
     var that = $(this); 

     $(this).stop().animate({ 
      width: 130 
     }); 

     timer = setTimeout(function(){ 
      that.css('z-index','1'); 
     }, 500); 
    }); 
})