将jQuery函数从hover更改为slideToggle

在SOers的帮助下，我能够更有效地使用hover和淡入/淡出function来显示此图像布局下的文本div。 但是我想使用slideToggle，因为hover时，文本闪烁，div反弹。 我如何调整此函数以使用slideToggle，其中切换需要单击每个图像？

jsfiddle： http ： //jsfiddle.net/Ckrtu/11/

这是我想要做的图像：

这是旧的hoverfunction

$(document).ready(function() { $("#imagegallerydiv").delegate("dt[class]", "hover", function(e) { if (e.type === "mouseenter") { var index = $(this).parent().index(); $("#wide-text-div-under-all-images div").eq(index).fadeIn('fast'); } if (e.type === "mouseleave") { var index = $(this).parent().index(); $("#wide-text-div-under-all-images div").eq(index).fadeOut('fast'); } }); }); 

CSS：

 #imagegallerydiv {width: 700px; height:200px; margin:5px; text-align: center;} dl.gallery {width: 97px; text-align: center; float: left;} .gallery dt {width: 80px; margin-top:2px; font-size: .7em; text-align:center;} #wide-text-div-under-all-images div {display: none;} 

HTML：

 
 
 
Image Title One
 
 
Image Title Two
 
 
Image Title Three
 
 
Image Title Four
 
 
Image Title Five
 
 
 
Lorem Ipsum One
 
Lorem Ipsum Two
 
Lorem Ipsum Three
 
Lorem Ipsum Four
 
Lorem Ipsum Five
  

Answer 1

http://jsfiddle.net/samccone/z83Kx/

我认为这个例子更容易理解，并且比以前使用的更好地符合期望的结果。

只需将要显示的文本设置为要单击的div中的attr即可

希望这会有所帮助

Answer 2

你可能想用这个。

 $(document).ready(function() { var $textUnderImage = $("#wide-text-div-under-all-images div"); $('dt[class]').toggle( // first function fired on first click function() { var index = $(this).parent().index(); if($textUnderImage.is(":visible")) { $textUnderImage.fadeOut('fast'); } $("#wide-text-div-under-all-images div").eq(index).fadeIn('fast'); }, // second function fired on second click function() { var index = $(this).parent().index(); $("#wide-text-div-under-all-images div").eq(index).fadeOut('fast'); } ); 

第一个函数将在第一次单击时显示文本，第二个函数将在第二次单击时隐藏文本，依此类推……

toggle方法将按顺序触发其中的函数。 因此，每次单击处理程序时，一个方法将在另一个方法之后处理一次。 您可以在toggle方法中添加尽可能多的函数，并且每个函数将按顺序执行。