Jquery - 为啥我的图像不会在鼠标悬停时动画？

Posted 2023-05-08

【中文标题】Jquery - 为啥我的图像不会在鼠标悬停时动画？

【英文标题】：Jquery - Why wont my image animate on mouseover?Jquery - 为什么我的图像不会在鼠标悬停时动画？

【发布时间】：2011-09-22 16:07:09

【问题描述】：

我试图让我的图像在鼠标悬停（悬停）时进行动画处理，但由于某种原因它根本不起作用。

 $(document).ready(function()
            $(function() 
            $('img.caption').hover(function()
                $(this).find('img').animate(top:'182px',queue:false,duration:500);
            , function()
                $(this).find('img').animate(top:'0px',queue:false,duration:500);
            );
        );
 );

和相邻的html

<div class="imagediv"><img class="caption" src="images/gallery/placeholder.jpg"  title="" /></div>

我还有另一个悬停链接到标题类，这可能是冲突吗？当我将鼠标悬停在图像上时，什么也没有发生：/

这会干扰其他代码吗？

 $(document).ready(function()
        $(".caption").hover(
                function () 
                  $("#gallerydescription").html( $(this).attr("alt"));

  , 
  function () 
    $("#gallerydescription").html("");
  
);
 );

【问题讨论】：

为什么会有$(document).ready(function() 和$(function() ？它们是等价的，你只需要一个

【参考方案1】：

$(document).ready(function()和$(function() 一样，基本上你在做同样的事情两次，输一次。

$('img.caption') 已经选择了图像，而$(this).find('img') 将开始在该图像中寻找图像。什么都找不到。

CSS position 必须是 relative 或 absolute 才能使您的动画工作：

img position: relative;

$(function()
    $('img.caption').hover(
        function()
            $(this).animate(top:'182px',queue:false,duration:500);
        ,
        function()
            $(this).animate(top:'0px',queue:false,duration:500);
        );
);

编辑：

第二个.hover() 不应干扰，因为它似乎对图像本身没有任何作用。

查看这个小提琴进行验证：http://jsfiddle.net/4c6Kx/6/

最好的办法是开始注释不同的代码块，直到找到罪魁祸首。

【讨论】：

嗯，是的，谢谢，它似乎在小提琴上可以正常工作，但在页面上却不行。

这似乎是缓动脚本的问题。任何已知的冲突？

我没有这方面的经验，需要看一些相关的代码。

发现我们的答案几乎相同，而且您的 JSFiddle 中使用了 Google 图像，这很奇怪

【参考方案2】：

Example Here

正如我在 cmets 中所说的：

以下是等价的，随便挑吧：

$(document).ready(function()

$(function()

您可以删除 find 函数，因为您已经开始使用 img 您可以从作业中删除px 您需要为您的 img 提供 position（绝对/相对）

---

例子：

$(document).ready(function()
   $('img.caption').hover(
      function() $(this).animate(top:'182',queue:false,duration:500); ,
      function() $(this).animate(top:'0',queue:false,duration:500);   
   );
);

【参考方案3】：

jquery：

$(document).ready(function() 
        $('img.caption').hover(function() 
            $(this).animate(
                top: '182px'
            , 
                queue: false,
                duration: 500
            );
        , function() 
            $(this).animate(
                top: '0px'
            , 
                queue: false,
                duration: 500
            );
        );
);

然后给你的图片position:relative

【讨论】：

嗯，我尝试了所有建议，但鼠标悬停仍然没有。

我在重新编辑时添加的代码是否也可以使用 .caption 进行悬停？