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

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

Answer 3

这里的例子

正如我在评论中所述：

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});   }
   );
});