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

Question

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

 $(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" alt="This is test" title="" /></div>

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

这会干扰其他代码吗？

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

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

Answer 1

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

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

3. 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/

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

Answer 2

Example Here

正如我在 cmets 中所说的：

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

   $(document).ready(function(){

   $(function() {

2. 您可以删除 find 函数，因为您已经开始使用 img
3. 您可以从作业中删除px
4. 您需要为您的 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});   }
   );
});

Answer 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