javascript动画后，不透明度有时会（随机）更改

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

我让动画2在图像上运行，当我将鼠标悬停在图像上时，动画2停止并发生转换，使图像保持缩放状态，直到我将鼠标悬停在图像上，当我离开它时，动画2不会取代它的位置

问题是当过渡发生时，有时它的图像不透明度为0.3，有时为1。我希望在动画2停止后它保持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');
});

---

好吧，我想你的功能有点问题。这应该起作用：

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

下面是一个JSFIDLE来展示它的工作原理：

我已经删除了添加CSS样式cursor:pointer的行，因为它可以在CSS中设置，并且始终只应用于悬停。 我已经删除了函数脉冲的重新声明，因为您不想重新声明函数。 在你原来的pulse函数中，我在opacity上添加了inline if语句，以检查ther div img1是否有类转换，如果有，则始终将其设置为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);
        });
    }
);

下面是JSFIDLE：

我已经分开了两个动画，因为你只想在鼠标悬停时缩放。 脉冲功能在悬停时停止重复，并在悬停关闭时重新启动。为了实现这一点，我必须创建一个单独的自调用函数来启动脉冲。 stoptrue、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

为什么线条不透明度：后退？1:1，无效？@AndrewPollard事情是..开始时只有不透明度、字体大小和转换没有发生。当我在上面悬停时，不透明度应立即变为1，当我离开它时，会发生转换缩小。图像会放大，但不透明度将保持1，这意味着动画2在我将鼠标悬停在其上后已停止。问题是，我的代码中一切正常，只是不透明度有时不等于1。容量不应更改，并且这在我的代码中发生，但它应该是1，这在我的代码中没有发生code@user3731929所以你只想放大鼠标悬停。然后缩小鼠标悬停。你想在悬停时立即改变不透明度。对吗？在你的例子中。。动画2在悬停后再次开始，这不应该……你能告诉我如何防止吗？@user3731929恐怕你必须更清楚一些。请一步一步地告诉我应该采取什么行动。目前，它总是淡入淡出，除非悬停在上方。字体在悬停时增大大小。关闭鼠标悬停时字体会减小。一旦鼠标悬停在上方，不透明度就不会改变。但是在你的示例中，这很好。几乎达到我需要的程度。鼠标悬停离开字体后，不透明度再次开始改变。