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

如何解决jQuery-为什么鼠标悬停时我的图像不动画？

| 我试图让我的图像在鼠标悬停时进行动画处理，但由于某种原因，它根本无法工作。

 $(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\'},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(\"\");
  }
);
 });

    

解决方法

        这里的例子 正如我在评论中所述： 以下是等效的，选择即可：

$(document).ready(function(){

$(function() {

您可以删除

find

功能，因为您已经开始使用img 您可以从作业中删除ѭ6 您需要给img一个

position

（绝对/相对） 例：

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

    ,        

$(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\'},duration:500});
        },function(){
            $(this).animate({top:\'0px\'},duration:500});
        });
});

编辑： 第二个

.hover()

不应干涉，因为它似乎对图像本身没有任何作用。 请参阅此提琴进行验证：http://jsfiddle.net/4c6Kx/6/ 最好的选择是开始注释不同的代码块，直到找到罪魁祸首。     ,        jQuery的：

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

然后给你的图片

position:relative