Question

我有3个横幅，其中我希望每个横幅都有mouseenter和mouseleave行为。
我使它工作，但通过重复jQuery并为每个div使用id。我想知道如何使用类，因为每个动画都是相同的。

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

jquery简化了mouseenter mouseleave代码

1 个答案: