極品jQuery中

Question

隱藏和顯示DIV優化的代碼，我有一個div：

<div id="p1" class="img-projects" style="margin-left:0;"> 
    <a href="project1.php"> <img src="image1.png"/></a> 
    <div id="p1" class="project-title">Bar Crawler</div> 
</div> 

在鼠標滑過我想與透明度添加圖像，並顯示該項目的冠軍。 所以我用這個代碼：

<script type="text/javascript"> 
    $(function() { 
     $('.project-title').hide(); 

      $('#p1.img-projects img').mouseover(
       function() { 
        $(this).stop().animate({ opacity: 0.3 }, 800); 
        $('#p1.project-title').fadeIn(500); 
      }); 
      $('#p1.img-projects img').mouseout(
       function() { 
        $(this).stop().animate({ opacity: 1.0 }, 800); 
        $('#p1.project-title').fadeOut(); 
      }); 


      $('#p2.img-projects img').mouseover(
       function() { 
        $(this).stop().animate({ opacity: 0.3 }, 800); 
        $('#p2.project-title').fadeIn(500); 
      }); 
      $('#p2.img-projects img').mouseout(
       function() { 
        $(this).stop().animate({ opacity: 1.0 }, 800); 
        $('#p2.project-title').fadeOut(); 
      }); 

    }); 

</script> 

代碼工作正常，但沒有人知道的方式來優化我的代碼？

謝謝

Answer 1

您可以使用一個.hover()功能一切的相對不ID依賴，就像這樣：

$('.img-projects img').hover(function() { 
    $(this).stop().animate({ opacity: 0.3 }, 800) 
      .closest('.img-projects').find('.project-title').fadeIn(500); 
}, function() { 
    $(this).stop().animate({ opacity: 1.0 }, 800) 
      .closest('.img-projects').find('.project-title').fadeOut(); 
}); 

此發現相對於一個所有元素中徘徊，而不是具有不同函數來處理每一個...你可能會從你的元素中刪除這些ID，除非它們用於其他目的。由於目前您的HTML無效，且ID每次使用兩次，因此也可以解決此問題。