Question

我希望第一张图片在mouseenter上淡出到下一张图片，然后在mouseleave上反转。我想将jQuery脚本用于多个id的

<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？

还有其他更好的脚本吗？

Answer 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')这样的事情并相对地引用另一个img。

如何将jQuery脚本用于多个部门？

1 个答案: