jQuery技术:将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
  

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

以上就是jQuery教程分享将jQuery函数从hover更改为slideToggle相关内容,想了解更多jQuery开发(异常处理)及jQuery教程关注计算机技术网(www.ctvol.com)!)。