jQuery 动画

Question

我正在使用 Jquery .animate，并尝试做一些基本的图像动画，在鼠标悬停时展开图像。然而，我有 4 张图像，目前每当一张图像展开时，它都会影响其他图像。我如何使它们彼此独立？

  <div class="logos"> 
     <img align="top" id="imgBuffalo" src="../../../../Content/Images/buffalo.png" width="80" height="60" />&nbsp;&nbsp; 
     <img align="top" id="imgIndianapolis" src="../../../../Content/Images/indianapolis.png" width="80" height="60" />&nbsp;&nbsp; 
     <img align="top" id="imgMiami" src="../../../../Content/Images/miami.png" width="80" height="60" />&nbsp;&nbsp; 
     <img align="top"  id="imgNYJets" src="../../../../Content/Images/nyjets.png" width="80" height="60" /> 
  </div> 


 $(document).ready(function () { 

        $("#imgBuffalo").mouseover(function () { 
            $("#imgBuffalo").animate({ width: "90px", height: "70px" }, 500); 
        }); 

        $("#imgBuffalo").mouseleave(function () { 
            $("#imgBuffalo").animate({ width: "80px", height: "60px" }, 500); 
        }); 

        $("#imgIndianapolis").mouseover(function () { 
            $("#imgIndianapolis").animate({ width: "90px", height: "70px" }, 500); 
        }); 

        $("#imgIndianapolis").mouseleave(function () { 
            $("#imgIndianapolis").animate({ width: "80px", height: "60px" }, 500); 
        }); 

        $("#imgMiami").mouseover(function () { 
            $("#imgMiami").animate({ width: "90px", height: "70px" }, 500); 
        }); 

        $("#imgMiami").mouseleave(function () { 
            $("#imgMiami").animate({ width: "80px", height: "60px" }, 500); 
        }); 

        $("#imgNYJets").mouseover(function () { 
            $("#imgNYJets").animate({ width: "90px", height: "70px" }, 500); 
        }); 

        $("#imgNYJets").mouseleave(function () { 
            $("#imgNYJets").animate({ width: "80px", height: "60px" }, 500); 
        });

Answer 1

使用 animate 方法可以有效地更改其所作用的元素上的 CSS。由于您的图像只是彼此内嵌，因此更改其中一个图像的尺寸必然会影响其他图像。

您可以尝试使用 position:relative 或 position:absolute ，以便图像在尺寸变化时不会移动，但是跨浏览器会出现不一致的结果。

如果您正在寻找弹出扩展类型效果，我建议创建一个新的 div，然后将图像克隆到其中。然后，您可以对浮动 div/图像执行任何您想要的操作，而不会影响其他内容。

根据您当前使用的动画，您似乎正在尝试实现类似于 Apple Dock 动画的效果。您可以使用许多可用的 jquery 插件直接手工编码动画。

Answer 2

您的意思是当一个图像扩展时它会移动其他图像？如果您不希望它们互相影响，则必须将每个图像放入绝对 div 中，并将包含活动动画的 div 的 z-index 更改为位于顶部。

Answer 3

最好的选择是将徽标绝对放置在屏幕上。这将防止它们彼此发生冲突。给每个 img 一个“logo”类或类似的东西。

.logo { position : 'absolute'; }

然后根据每个徽标的 ID 放置其位置。

接下来，我建议使用 .hover() 而不是 mouseover 和 mouseleave。这使您能够用更少的代码设置两个事件处理程序。

$('.logo').hover(function() {
     $(this).animate({ width: "90px", height: "70px", top : "5 less px than set in css", left : "5 less than set in css" }, 500); 
}, function() {
     $(this).animate({ width: "80px", height: "60px", top : "Reset to css", left : "reset to css" }, 500); 
}

阅读 http://api.jquery.com/hover/ 了解更多详细信息。

您正走在学习 jQuery 中一些很酷的效果的正确道路上。继续努力吧！