Question

我的公司徽标出现在我网站的页脚中，当用户将鼠标悬停在页脚上时，我希望图像logo.png淡出，然后biglogo.png淡入 - 在其位置。

当用户将光标移离#footer时，我希望logo.png淡入。

<div id="footer">
                <div id="logowrap">
                    <img src="images/logo.png" alt="" class="active" />
                    <img src="images/biglogo.png" alt="" />
                </div>
</div>

我已经尝试了很多东西，但似乎无法使逻辑正确，我最终会使用闪烁的图像，当我希望它们淡入时，图像会逐渐消失。

任何得到的帮助都很受欢迎（我把头发拉出来）

Answer 1

试试这个：

$(function() {
  $("#logowrap").hover(function() {
    $("#logowrap img:first").stop().fadeOut("fast",function() {
      $("#logowrap img:last").stop().fadeIn("fast");  
    });
  }, function() {
    $("#logowrap img:last").stop().fadeOut("fast",function() {
      $("#logowrap img:first").stop().fadeIn("fast");  
    });
  });

它会淡化第一张图像，当完成后开始逐渐淡入另一张图像，然后反向悬停。您可以使用$(this)一点，但对于我认为的这种特殊情况，这看起来更清晰。

Answer 2

<div id="footer">
                <div id="logowrap">
                    <img src="images/logo.png" alt="" class="active" />
                    <img src="images/biglogo.png" alt="active_big" />
                </div>
</div>

$(document).ready(function(){

$('#active').bind('mouseout',function(){

。

$（ '＃活性'）淡出（ '慢'）; $（ '＃活性'）ATTR（ 'SRC'， '图像/ logo.png'）; ）};

$('#active_big').bind('mouseover',function(){

。

$（ '＃活性'）淡入（ '慢'）; $（ '＃active_big'）ATTR（ 'SRC'， '图像/ biglogo.png'）; ）};

});

应该可以正常使用

.hover淡出图像，淡入新图像。退出时返回原始图像

2 个答案: