javascript - jQuery fadeIn div 显示

Question

我有三个div

<div id="over1"> Over 1 </div>
<div id="over2"> Over 2 </div>
<div id="over3"> Over 3 </div>

<div id="image1"><img src="1.jpg></div>
<div id="image2"><img src="2.jpg></div>
<div id="image3"><img src="3.jpg></div>

我正在尝试构建一个 jQuery 脚本，因此当用户将鼠标箭头移到 over1 上时，1.jpg 淡入，然后当用户将鼠标箭头移到 over2 上时，出现 2.jpg，然后当用户移动时将鼠标箭头移到 Over 3 上，然后出现 3.jpg。然而，只有一个图像出现在现场。

以下是正确的吗？

<script  type="text/javascript">

$('over1').mouseover(  function() {  $('image1').fadeIn(1000);  }  );

$('over1').mouseleave(  function() {  $('image1').fadeOut(1000);  }  );

$('over2').mouseover(  function() {  $('image2').fadeIn(1000);  }  );

$('over2').mouseleave(  function() {  $('image2').fadeOut(1000);  }  );

$('over3').mouseover(  function() {  $('image3').fadeIn(1000);  }  );

$('over3').mouseleave(  function() {  $('image3').fadeOut(1000);  }  );

</script>

Answer 1

$('#over1').mouseover(
    function() { $('#image1').fadeIn(1000); }
);
$('#over1').mouseleave(
    function() { $('#image1').fadeOut(1000); }
);
$('#over2').mouseover(
    function(){ $('#image2').fadeIn(1000); }
);
$('#over2').mouseleave(
    function(){ $('#image2').fadeOut(1000); }
);
$('#over3').mouseover(
    function(){ $('#image3').fadeIn(1000); }
);
$('#over3').mouseleave(
    function(){ $('#image3').fadeOut(1000); }
);

或

$('#over1').hover(
    function(){ $('#image1').fadeIn(1000); },
    function(){ $('#image1').fadeOut(1000); }
);
$('#over2').hover(
    function(){ $('#image2').fadeIn(1000); },
    function(){ $('#image2').fadeOut(1000); }
);
$('#over3').hover(
    function(){ $('#image2').fadeIn(1000); },
    function(){ $('#image2').fadeOut(1000); }
);