Более эффективный jQuery Наведите курсор на fadeIn / fadeOut для нескольких div? - PullRequest
Новая
       11

Более эффективный jQuery Наведите курсор на fadeIn / fadeOut для нескольких div?

1 голос
/ 27 апреля 2011

У меня есть основы наведения курсора на изображение и показа текста под изображением.Но как это можно сделать более эффективным?

В нынешнем виде мне нужно иметь четыре различные функции для постепенного увеличения / уменьшения соответствующего текста для каждого изображения.

Мне нужно сохранитьРазметка 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;}

Ответы [ 3 ]

2 голосов
/ 27 апреля 2011

Вы можете сделать это таким образом (не проверял, но это должно работать) 

$("#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 = часть

1 голос
/ 27 апреля 2011

Как насчет: 

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

Пример кода на 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');
        }
    });
});

Пример delegate()

0 голосов
/ 27 апреля 2011 
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");
    });
});
...