将 jQuery 函数从悬停更改为 SlideToggle

Question

在 SOers 的帮助下，我能够更有效地实现悬停和淡入/淡出功能，以在此图像布局下显示文本 div。但我想使用slideToggle，因为悬停时，文本会闪烁，div 会弹跳。我如何调整此功能以使用需要单击每个图像进行切换的slideToggle？

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

这是我想要做的事情的图像：

这是旧的悬停函数

$(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：

<div id="imagegallerydiv">

   <dl class="gallery"><dt class="imgone"><img alt="img" src="one.jpg"></dt>
   <dt>Image Title One</dt></dl>

   <dl class="gallery"><dt class="imgtwo"><img alt="img" src="two.jpg"></dt>
   <dt>Image Title Two</dt></dl>

   <dl class="gallery"><dt class="imgthree"><img alt="img" src="three.jpg"></dt>
   <dt>Image Title Three</dt></dl>

   <dl class="gallery"><dt class="imgfour"><img alt="img" src="four.jpg"></dt>
   <dt>Image Title Four</dt></dl>

 <dl class="gallery"><dt class="imgfive"><img alt="img" src="four.jpg"></dt>
   <dt>Image Title Five</dt></dl>

</div>

<div id="wide-text-div-under-all-images">

     <div class="textone">Lorem Ipsum One</div>

     <div class="texttwo">Lorem Ipsum Two</div>

     <div class="textthree">Lorem Ipsum Three</div>

     <div class="textfour">Lorem Ipsum Four</div>

     <div class="textfive">Lorem Ipsum Five</div>

</div>

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 方法将按顺序触发其中的函数。因此，每次单击处理程序时，一个方法就会被处理一次。您可以在切换方法中添加任意数量的功能，并且每个功能将在每次单击时依次执行。