将jQuery函数从悬停更改为slideToggle [英] Change jQuery function from hover to slideToggle

问题描述

在SOers的帮助下，我能够更有效地使用悬停和淡入/淡出功能在此图像布局下显示文本div。但我想用slideToggle工作，因为悬停时，文本闪烁和div弹跳。

//jsfiddle.net/Ckrtu/11/rel =nofollow noreferrer> http://jsfiddle.net/Ckrtu/11/

是我想要做的事情的图片：

这是旧的悬停功能

 $（＃imagegallerydiv）。delegate（dt [class]，hover，function（e）{ 
 if（e.type ===mouseenter）{
 var index = $（this）.parent（）。index（）; 
 $（＃wide-text-div （e.type ===mouseleave）{
 var index（））。eq（index）.fadeIn（'fast'）; 
} 
 if = $（this）.parent（）。index（）; 
 $（＃wide-text-div-under-all-images div）。eq（index）.fadeOut（'fast'）; 
} 
}）; 
}）; 
  

CSS：

  #imagegallerydiv {width：700px;高度：200像素;保证金：5px的; text-align：center;} 
 
 dl.gallery {width：97px; text-align：center; float：left;} 
 
 .gallery dt {width：80px;边距：2px的; font-size：.7em; text-align：center;} 
 
＃wide-text-div-all-images div {display：none;} 
  

HTML：

 < div id = imagegallerydiv > 
 
< dl class =gallery>< dt class =imgone>< img alt =imgsrc =one.jpg>< / dt> 
< dt>图片标题One< / dt>< / dl> 
 
< dl class =gallery>< dt class =imgtwo>< img alt =imgsrc =two.jpg>< / dt> 
< dt>图片标题Two< / dt>< / dl> 
 
< dl class =gallery>< dt class =imgthree>< img alt =imgsrc =three.jpg>< / dt> 
< dt>图片标题三< / dt>< / dl> 
 
< dl class =gallery>< dt class =imgfour>< img alt =imgsrc =four.jpg>< / dt> 
< dt> Image Title Four< / dt>< / dl> 
 
< dl class =gallery>< dt class =imgfive>< img alt =imgsrc =four.jpg>< / dt> 
< dt>图片标题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> 
  

解决方案

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

我觉得这个例子很多更容易理解并且更好地符合您之前使用的所期望的结果。

只需在要点击的div内设置想要显示为attr的文本

< dl class =gallery>< dt class =imgthreeto_show ='this is text3'>< img alt =imgsrc =http：// www。 placehold.it/75x100\"> ;</dt>

希望这有助于

With help from SOers, I was able to make more efficient a hover and fadein/fadeout function to show text divs under this image layout. But I'd like to work with slideToggle because with hover, the text flickers and the divs bounce. How would I adapt this function to use slideToggle where the toggle requires a click on each image?

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

This is an image of what I'm trying to do:

This is the old hover function

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

解决方案

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

I think this example is much simpler to understand and fits the desired outcome better then what you were using before.

Just set the text that you want to show as an attr within the div that is to be clicked

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

hope that this helps

这篇关于将jQuery函数从悬停更改为slideToggle的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！