更高效的jQuery悬停淡入/淡出多个div？

我已经掌握了将图像悬停在图像上方并在图像下方显示文本div的基础知识。但是，如何才能提高效率呢？更高效的jQuery悬停淡入/淡出多个div？

就目前而言，我必须有四种不同的功能来淡化/淡出每张图片的相应文字。

我需要保留图像的dl和dt标记，但可以更改包含文本的div的标记。

jQuery的

$(document).ready(function() 
{  
    $("dt.imgone").hover(
     function() { 
     $("div.textone").fadeIn('fast'); 
     }, 
     function() { 
     $("div.textone").fadeOut('fast'); 
     } 
    ); 
});

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> 

</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>

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;}

来源

2011-04-26 markratledge

如何：

$(document).ready(function(){  
    $("#imagegallerydiv dt[class]").hover(
     function() { 
     var index = $(this).parent().index(); 
     $("#wide-text-div-under-all-images div").eq(index).fadeIn('fast'); 
     }, 
     function() { 
     var index = $(this).parent().index(); 
     $("#wide-text-div-under-all-images div").eq(index).fadeOut('fast'); 
     } 
    ); 
});

Code example on jsfiddle.

另一种选择是使用delegate()这样你就不会结合一堆事件处理程序直接到dt。。

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

Example of delegate()

来源

2011-04-26 20:16:34

谢谢，但在1.4.4和Safari下，第一个例子并没有隐藏以前的文本div，所以他们积累;然后第二个示例闪烁文本div，有时隐藏光标上的文本暂停在图像上。 – markratledge 2011-04-26 22:38:52

我在第一个例子中有一个小错字。永远不会调用fadeOut。 – 2011-04-27 00:10:28

我无法重现在safari或chrome中暂停图像时文本消失的问题。它也发生在你的小提琴中吗？ – 2011-04-27 01:40:12

你能做到这样（没有测试它BU t将其应工作）

$("#imagegallerydiv dt").hover(
     function() { 
      var idx = $(this).parent().index(); 
      $("#wide-text-div-under-all-images div").eq(idx).fadeIn('fast'); 
     }, 
     function() { 
      var idx = $(this).parent().index(); 
      $("#wide-text-div-under-all-images div").eq(idx).fadeOut('fast'); 
     } 
    );

编辑idx =部分

来源

2011-04-26 20:16:24 Damp

+1，但指数应该是'$（本）.parent（）指数（）;' – DarthJDG 2011-04-26 20:24:48

@DarthJDG我不好。编辑我的答案 – Damp 2011-04-26 20:27:03

谢谢。这工作正常，但是当我将鼠标悬停在图像上时，文本消失。 – markratledge 2011-04-26 22:40:08

var $divs = $("#wide-text-div-under-all-images div"); 
$("#imagegallerydiv dl").each(function(index) { 
    $("img", this).hover(function() { 
     $divs.eq(index).fadeIn("fast"); 
    }, 
    function() { 
     $divs.eq(index).fadeOut("fast"); 
    }); 
});

来源

2011-04-26 20:17:08 Marko

更高效的jQuery悬停淡入/淡出多个div？

回答

相关问题