将jQuery函数从hover更改为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

即可

<dl class="gallery"><dt class="imgthree" to_show='this is text3'><img alt="img" src="http://www.placehold.it/75x100"></dt>

希望这有助于

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方法中添加尽可能多的函数，并且每个函数将按顺序执行。