jquery - 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

尝试使用mouseenterandmouseleave代替。

如果您从每个子元素移动到具有绑定事件的元素中的另一个元素，也会触发这些事件mouseover。mouseout

您还可以使用hoverwhich 是mouseenterand的别名mouseleave

Answer 2

这可能是您执行此功能的更好方法：

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

hover 方法使用两个功能。第一个是初始悬停函数，第二个是悬停回调函数。.ex我猜的元素是以这种方式生成的？.ex0,.ex1,.ex2. 如果是这样，您的功能应该可以工作。如果.ex元素在.case其中并且有多个，.case则可以使用此选择器：

$('.ex',this)

如果您有这些元素的列表，则可以使用您的方法来检索 id 并使用:eq()索引选择器：

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

Answer 3

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

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

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