1
私はいくつかのmouseenter
とそれぞれmouseleave
ビヘイビアを持っている3つのバナーを持っています。
私はそれを動作させましたが、jQueryを繰り返し、各divにIDを使用しました。私はアニメーションがそれぞれ同じであるので、クラスを使用するだけでそれを行う方法を知りたいです。jquery mouseenter mouseleave code
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);
});
おかげで、この偉大な助けのために私のコードとゲイブをフォーマットするために壊しました!ここに作業コードがあります: '$( '。banner'):$(this).find( 'div.banner-image')。stop()。animate({top:"アニメーション({top: "-110px"}、300); });}アニメーション({top: "-110px"}、300); $(this).find( 'div.banner-tag')。$( '。banner')。mouseleave(function(e){ $(this).find( 'div.banner-image'))stop()。animate({top: "0px"}、500); $(this).find( 'div.banner-tag')。stop()。animate({top: "-90px"}、300); }); ' – aurrutia