javascript动画后不透明度有时会(随机)改变

Question

我有两个动画，一个是“过渡”，它在悬停时缩小图像，另一个是 animation2，其中图像的不透明度以周期性间隔重复变化。

我有 animation2 在图像上进行，当我将鼠标悬停在它上面时，animation2 停止并发生转换，使图像保持缩放直到我悬停在它上面，当我离开它时，animation2 不会接受它地方。

问题是发生过渡时，有时它的图像不透明度为 0.3，有时为 1。我希望它在 animation2 停止后保持 1。有什么建议吗？

(function pulse (back) {
    $('#img1').animate ({
        'font-size': (back) ? '100px' : '140px',
        opacity: (back) ? 1 : 0.3
    }, 500, function () {pulse(!back)});
})(false);
$('#img1').hover(function () {
    $(this).css("cursor", "pointer");
    $("#img1").addClass('transition');
    (function pulse (back) {
        $('#img1').animate ({
            'font-size': (back) ? '100px' : '140px',
            opacity: (back) ? 1 : 1
        }, 500000, function () {pulse(!back)});
    })(false);
}, function () {
    $("#img1").removeClass('transition');
});

Answer 1

好的，我认为您的函数存在一些问题。这应该有效:

(function pulse (back) {
    $('#img1').animate ({
        'font-size': (back) ? '100px' : '140px',
        opacity: (back || $("#img1").hasClass('transition')) ? 1 : 0.3
    }, 500, function () { pulse(!back)} );
})(false);

$('#img1').hover(
    function () {
        $("#img1").addClass('transition');
    },
    function(){
        $("#img1").removeClass('transition');
    }
);

这里有一个 jsfiddle 来展示它的工作:http://jsfiddle.net/G848k/

• 我删除了添加 CSS 样式 cursor:pointer 的行，因为它可以在 CSS 中设置，并且始终只在悬停时应用。
• 我已经删除了函数 pulse() 的重新声明，因为您不想重新声明该函数。
• 在您原来的 pulse() 函数中，我已将不透明度的内联 if 语句添加到检查 div #img1 是否具有类“transition”以及是否所以要始终将其设置为 1。

希望这就是您想要的。

---

根据您的评论进行更新。

试试这个:

function pulse (back) {
    if(!$("#img1").hasClass('transition')){
        $('#img1').animate ({
            opacity: (back) ? 1 : 0.3
        }, 500, function () { pulse(!back)} );
    }
}

(function (back){
    pulse (back);
})(false);

$('#img1').hover(
    function () {
        var element = $("#img1");
        element.addClass('transition');
        element.stop(true, true);
        element.css('opacity', 1);
        element.animate ({
            'font-size': '140px',
        }, 500);
    },
    function(){
        var element = $("#img1");
        element.removeClass('transition');
        element.animate ({
            'font-size': '100px',
        }, 500, function(){
             pulse(false);
        });
    }
);

这是 jsfiddle:http://jsfiddle.net/G848k/1/

• 我已将 2 个动画分开，因为您只需要在悬停时进行缩放。
• 脉冲功能在鼠标悬停时停止重复，并在鼠标悬停时重新启动。为了完成这项工作，我必须创建一个单独的自调用函数来启动脉冲。
• stop(true, true) 立即停止动画，然后 .css('opacity',1) 立即将其设置为 1。

---

根据进一步评论略作更新。刚刚删除了重新初始化脉冲函数的行。也恢复到之前的脉冲自调用功能。

(function pulse (back) {
    if(!$("#img1").hasClass('transition')){
        $('#img1').animate ({
            opacity: (back) ? 1 : 0.3
        }, 500, function () { pulse(!back)} );
    }
})(false);

$('#img1').hover(
    function () {
        var element = $("#img1");
        element.addClass('transition');
        element.stop(true, true);
        element.css('opacity', 1);
        element.animate ({
            'font-size': '140px',
        }, 500);
    },
    function(){
        var element = $("#img1");
        element.removeClass('transition');
        element.animate ({
            'font-size': '100px',
        }, 500);
    }
);

参见 jsfiddle http://jsfiddle.net/G848k/3/