Измените функцию jQuery с наведения на slideToggle

Question

С помощью SOers я смог сделать более эффективными функции наведения и постепенного исчезновения / постепенного исчезновения, чтобы показывать текстовые div при этом макете изображения.Но я бы хотел поработать с slideToggle, потому что при наведении указатель мыши мерцает, а элементы div отскочили.Как мне адаптировать эту функцию для использования slideToggle, когда для переключения требуется щелчок на каждом изображении?

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

Это изображение тогоm пытается сделать:

Это старая функция наведения

$(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, который нужно щелкнуть

<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 метод будет запускать функции внутри него последовательно. Поэтому каждый раз, когда вы щелкаете по обработчику, один метод за другим обрабатывается один раз. Вы можете добавить как можно больше функций в метод переключения, и каждая функция будет выполняться при каждом щелчке последовательно.