1

最初の写真を で次の写真にフェードさせ、mouseenterで逆にしたいmouseleave。複数の ID に jQuery スクリプトを使用したい

<script type="text/javascript">
$('#picone1').mouseenter(function(){
   $('#picone1').fadeToggle(500);
   $('#pictwo1').fadeToggle(500);
});
$('#pictwo1').mouseleave(function(){
   $('#picone1').fadeToggle(500);
   $('#pictwo1').fadeToggle(500);
});
</script>
<div id="fade">
   <img src="two.gif" width="100" height="100" id="pictwo1" style="display:none;"/>
   <img src="one.gif" width="100" height="100" id="picone1"/>
</div>
<div id="fade">
   <img src="two.gif" width="100" height="100" id="pictwo2" style="display:none;top: 300px;" />
   <img src="one.gif" width="100" height="100" id="picone2" style="top: 300px;" />
</div>

私が使用する場合

$('#picone1,#picone2').mouseenter(function(){

divマウスが入った部分だけをフェードするには？

これを行うための他のスクリプトまたはより良いスクリプトはありますか?

4

1 に答える 1

1

jQuery では、イベント コールバック内で、イベントthisをトリガーした DOM 要素を参照します。したがって、次のようにします。

 $('#picone1, #picone2').mouseenter(function() {
     // $(this) refers to whichever div was entered, so you can do:
     $(this).fadeToggle(500);
     $(this).prev('img').fadeToggle(500); // get previous IMG in the DOM and fade
 });

IDの代わりに画像クラスを与えるためにこれをたくさん行っている場合は、$('img.before')他の画像を相対的に参照できるようにすることをお勧めします。

于 2012-05-15T14:13:43.677 に答える