0

我正在尝试为一张图片做一个鼠标悬停事件，当你将鼠标悬停在一个 div 上并在图片上动画时。但是，当我进行鼠标悬停时，当我一次只想要一个时，它会为单独的图片显示两个 div。这是我的代码。第一部分是鼠标悬停。二是鼠标移出。

$('.portfolio img').mouseover(function(){
    $(this).css('cursor', 'pointer');
    $(this).parent().find('img:first').stop().animate({opacity:1}, 800, function() {
          $("div.folio").animate({ height: '+=25px', top: '-=24px' }, 100, function() {
                $("div.folio span").animate({ opacity: 1 }, 500);
          });
    });
});

$('.img_grayscale').mouseout(function(){
       $(this).stop().animate({opacity:0}, 800, function() {
            $("div.folio span").animate({ opacity: 0 }, 500, function() {
                $("div.folio").animate({ height: '-=25px', top: '+=24px' }, 100);
                $("div.folio").css('top', '-9px');
            });
        });
}); 

        <div class="portfolio">
            <h2>The Portfolio</h2>
            <p class="slideTwo">Check out some of our recent projects.</p>
            <ul>
                <li><img src="portfolioOne.jpg"></img><div class="folio"><span>thesite.com</span></div></li>
                <li><img src="portfolioOne.jpg"></img><div class="folio"><span>mysite.com</span></div></li>
            </ul>
        </div>
4

4 回答 4

1

使用 jQuery$("div.folio")将返回所有带有“folio”类的 div。由于您在两张图像上都看到了此动画，而不仅仅是您将鼠标悬停的那张，我假设它们在要制作动画的 div 上都有相同的类。为了只对其中一个进行动画处理，您需要在使用 jQuery 选择它时更加具体。在 div 的路径上包含 $(this) 以进行动画处理通常有效，但如果没有相应的 HTML，我无法告诉您确切的代码。

于 2012-04-19T18:26:15.390 回答
0

设法弄清楚这一点。我必须通过下面的代码基本上横穿 DOM。我引用了图像，然后转到父级，然后转到 DOM 中的下一个元素，即 div.folio 的 div。然后我去那个对象的孩子淡入它。我基本上在鼠标移出时反向做了同样的事情。

            $('.portfolio img').mouseover(function(){
                $(this).css('cursor', 'pointer');
                $(this).parent().find('img:first').stop().animate({opacity:1}, 800, function() {
                    $(this).parent().next().animate({ height: '+=25px' }, 100, function() {
                        $(this).children().animate({ opacity: 1 }, 100);
                    });
                });
            });

            $('.img_grayscale').mouseout(function(){
                $(this).stop().animate({opacity:0}, 800, function() {
                        $(this).parent().next().children().animate({ opacity: 0 }, 100, function() {
                            $(this).parent().animate({height: '-=25px' }, 100);
                    });
                });
            });
于 2012-04-20T13:53:13.537 回答
0

我对此有几个担忧，这可能有问题，也可能没有问题，具体取决于您尚未展示的其他情况。

  • 您正在$(this).parent().find('img:first')jQuery onmouseover 函数内部进行操作，该函数$(this)应该已经代表了img您关心的内容。您是否发现出于某种原因有必要这样做？
  • 您可以在选择器中更具体。尝试做$(".portfolio>ul>li>img")
  • img_grayscale在您的问题的标记中只提到一次，所以我不确定该类是如何应用的，但我假设它确实如此。
  • 您可以直接将类portfolio（或一些唯一标识符）添加到您的图像中，并且可能更容易弄清楚为什么它没有按预期工作。那么你的鼠标悬停选择器可能只是$(".specialClass")

您绝对应该尝试发布 jsfiddle.net；您可以从网上借用任意两张图片进行测试。

于 2012-04-19T19:39:19.683 回答
0

您需要通过从事件处理程序返回“false”来取消冒泡事件。

$('.portfolio img').mouseover(function(){
    // Your logic here...
    return false;
});
于 2012-04-19T18:18:18.140 回答