JQuery slideUp/Down循環？

Question

我錯在哪裏？ http://jsfiddle.net/j5yTU/

只想讓.ex在鼠標離開區域時向上滑動，但它似乎循環然後向上滑動。

$("div.case").mouseover(function() { 
var id = $(this).attr("id"); 
$(this).css("opacity", "1").css("filter", "alpha(opacity=100)"); 
$(".ex"+id).slideDown(500); 
}); 

$("div.case").mouseout(function() { 
var id = $(this).attr("id"); 
$(this).css("opacity", "0.4").css("filter", "alpha(opacity=40)"); 
$(".ex"+id).slideUp(500); 
}); 

任何人都知道問題可能是什麼？

Answer 1

這可能是一個更好的方式爲您做此功能：

$('.case').hover(function(){ 
    var id = $(this).attr('id'); 
    $(this).css('opacity':'1','filter':'alpha(opacity=100)'); 
    $('.ex'+id).slideDown(500); 
}, 
function(){ 
    var id = $(this).attr('id'); 
    $(this).css('opacity':'0.4','filter':'alpha(opacity=40)'); 
    $('.ex'+id).slideUp(500); 
}); 

懸停方法使用兩個功能。第一個是初始懸停功能，第二個是懸停回撥功能。我猜的.ex元素是以這種方式生成的？ .ex0,.ex1,.ex2。如果是這樣你的功能應該工作。如果.ex元素是內.case，並有超過一個.case這個選擇器可用於：

$('.ex',this) 

如果你有這個元素的列表，你可以用你的retireving的ID的方法，並使用:eq()指數選擇：

$('.ex:eq('+id+')') 

Answer 2

嘗試使用mouseenter和mouseleave代替。

如果您在具有綁定事件的元素中從每個子元素移到另一個子元素，則也會觸發事件mouseover和mouseout。

您還可以使用hover這是mouseenter和別名mouseleave

Answer 3

http://jsfiddle.net/j5yTU/1/

$("div.case img").mouseover(function() { 
    .... 
} 

    $("div.case img").mouseout(function() { 
    .... 
}