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

$(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/

你最好的选择是开始评论不同的代码块，直到找到罪魁祸首。

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

Example Here

正如我在评论中所述：

以下是等效的，挑选和选择：

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

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

3 个答案: