更高效的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？

回答

相關問題