jquery簡化鼠標mouseleave代碼

Question

我有3個橫幅，其中我想有一些mouseenter和mouseleave每個行爲的行爲。
我做了工作，但通過重複jQuery和使用IDS的每個格。我想知道如何使用class，因爲每個動畫都是相同的。

的HTML：

<div id="first-banner"> 
    <a href="<?php echo home_url('/'); ?>?page_id=51" class="banner-trigger" id="banner-trigger-1"> 
     <img src="<?php bloginfo('stylesheet_directory'); ?>/images/home-slider/banners/ico1.png" /> 
      <div class="banner-tag" id="banner-tag-1"> 
       <img src="<?php bloginfo('stylesheet_directory'); ?>/images/home-slider/banners/ico1link.png" /> 
      </div> 
    </a> 
</div> 
<div id="second-banner"> 
    <a href="<?php echo home_url('/'); ?>?page_id=47" class="banner-trigger" id="banner-trigger-2"> 
     <img src="<?php bloginfo('stylesheet_directory'); ?>/images/home-slider/banners/ico2.png" /> 
      <div class="banner-tag" id="banner-tag-2"> 
       <img src="<?php bloginfo('stylesheet_directory'); ?>/images/home-slider/banners/ico2link.png" /> 
      </div> 
    </a> 
</div> 
<div id="third-banner"> 
    <a href="#" class="banner-trigger trigger" id="banner-trigger-3"> 
     <img src="<?php bloginfo('stylesheet_directory'); ?>/images/home-slider/banners/ico3.png" /> 
      <div class="banner-tag" id="banner-tag-3"> 
       <img src="<?php bloginfo('stylesheet_directory'); ?>/images/home-slider/banners/ico3link.png" /> 
      </div> 
    </a> 
</div> 

腳本：

// First 
    $("#banner-trigger-1").mouseenter(function(e){ 
$("#banner-trigger-1").parent("#first-banner").stop().animate({top: "-50px"}, 300); 
$("#banner-trigger-1").children("#banner-tag-1").stop().animate({top: "-50px"}, 300); 
}); 

    $("#banner-trigger-1").mouseleave(function(e){ 
$("#banner-trigger-1").parent("#first-banner").stop().animate({top: "0px"}, 500); 
$("#banner-trigger-1").children("#banner-tag-1").stop().animate({top: "-90px"}, 300); 
}); 

    // Second 
    $("#banner-trigger-2").mouseenter(function(e){ 
$("#banner-trigger-2").parent("#second-banner").stop().animate({top: "-50px"}, 300); 
$("#banner-trigger-2").children("#banner-tag-2").stop().animate({top: "-50px"}, 300); 
}); 

    $("#banner-trigger-2").mouseleave(function(e){ 
$("#banner-trigger-2").parent("#second-banner").stop().animate({top: "0px"}, 500); 
$("#banner-trigger-2").children("#banner-tag-2").stop().animate({top: "-90px"}, 300); 
}); 

    // Third 
    $("#banner-trigger-3").mouseenter(function(e){ 
$("#banner-trigger-3").parent("#third-banner").stop().animate({top: "-50px"}, 300); 
$("#banner-trigger-3").children("#banner-tag-3").stop().animate({top: "-50px"}, 300); 
}); 

    $("#banner-trigger-3").mouseleave(function(e){ 
$("#banner-trigger-3").parent("#third-banner").stop().animate({top: "0px"}, 500); 
$("#banner-trigger-3").children("#banner-tag-3").stop().animate({top: "-90px"}, 300); 
}); 

Answer 1

<div class='banner' id="third-banner"> 
    <a href="#" class="banner-trigger trigger" id="banner-trigger-3"> 
     <img src="<?php bloginfo('stylesheet_directory'); ?>/images/home-slider/banners/ico3.png" /> 
     <div class="banner-tag" id="banner-tag-3"> 
      <img src="<?php bloginfo('stylesheet_directory'); ?>/images/home-slider/banners/ico3link.png" /> 
     </div> 
    </a> 
</div> 

使用類

$('.banner').mouseenter(function(e){ 
    $(this).find('a.banner-trigger').stop().animate({top: "-50px"}, 300); 
    $(this).find('div.banner-tag').stop().animate({top: "-50px"}, 300); 
});