0

我又遇到了 jQuery 的问题，希望有人能帮助我。

请在此处查看投资组合部分http://matoweb.com（应该有两个项目）

我正在重新设计我的投资组合网站，我想列出最后 6 个具有模糊悬停效果的投资组合项目。我设法用一张图片（第二张实际上是第一篇文章）来解决这个问题，但现在我添加了另一个测试组合项目，但有两个问题：

  • 我只得到第一个帖子的模糊图像（第二个图像），第二个帖子的图像没有得到它自己的模糊版本图像
  • 第二个问题是，当我将鼠标悬停在一张图片上时，它也会触发第二张图片的动画

这是这些效果的代码，但您可以在网站上查看它的实际效果：

        $(window).load(function(){
            $(".img_portfolio").pixastic("blurfast", {amount:1});
        });

        $(function() {
            $(".prva_stran_portfolio_single").mouseenter(function () {
                $(".normal_image").fadeOut("fast");
            }).mouseleave (function () {
                $(".normal_image").fadeIn("fast");
            });
        });
        $(function() {
        $(".roll").css("opacity","0");

        $(".roll").hover(function () {

        $(this).stop().animate({
        opacity: 0.9
        }, "fast");
        },

        function () {

        $(this).stop().animate({
        opacity: 0
        }, "fast");
        });
        });

任何帮助都将是真正的人。

我怎样才能在图像中添加某种 ID，以便在仅将鼠标悬停在其中一个上时它们不会全部模糊？

4

3 回答 3

0

我不只是悬停，而是使用 each(function) 将它们全部分开。它们不应该处于不同的功能中，真的......这样可以让事情更清洁，更容易调试。

$(".prva_stran_portfolio_single").each(function(){
    $(this).hover(function(){
        Run everything that happens on a hover (mouse in) here.
    },{
        Run everything that happens on a hover (mouse out) here.
    });
});
于 2012-09-15T21:12:56.660 回答
0

您不需要使用 ID，您应该能够调用.find("normal_image")它将搜索所有后代元素。相反，您可以使用.closest()在所有祖先元素中搜索最接近的匹配元素。

我不确定为什么 pixastic 没有为这两个图像创建一个模糊的画布，我的建议是尝试将 a.each(function() { pixastic(blur) })与选择器一起使用。

于 2012-09-15T21:16:44.563 回答
0

这是完成您想要的事情的一种干净而简单的方法。

var blurredImages = $( '.blur-me' );

blurredImages.on( "mouseenter", function () {
  $( this ).addClass( "blurred" );
})

blurredImages.on( "mouseleave", function () {
  $( this ).removeClass( "blurred" );
})

另外，我建议使用 CSS3 过渡而不是 jquery animate 来进行过渡时间。它要快得多。我将它包含在小提琴中。

这是一个jsfiddle：http: //jsfiddle.net/4mE3b/

于 2013-10-26T05:23:40.867 回答