jquery赋予图像不透明度并在动画后恢复它

Posted 2023-05-08

【中文标题】jquery赋予图像不透明度并在动画后恢复它

【英文标题】：jquery give to image opacity and restore it after animation

【发布时间】：2015-05-22 20:04:48

【问题描述】：

我的 jquery 代码有问题。我想给一个图像一个 50% opacity 并把它动画到左边 720px。在这个动画之后，我试图将不透明度恢复到 100%。

我有这个 html 代码：

 <div id="imageShow">
         <img id="img_1" src="image.jpg">      
    </div>
    <button id="button">press</button>

当按钮被点击时，我调用这个 jquery 代码：

             $(function () 
                    $("#button").click(function (evt) 

                        evt.preventDefault();

                        $("#imageShow").css( opacity: 0.5 )
                        var isfade = true

                        animateFunction().done(function () 
                            if (isfade) 
                                $("#imageShow").css("opacity", "");
                             

                        //im trying it both ways but nothing happend after animation                   
                        $("#imageShow").css("opacity", "");

                  );



            function animateFunction() 
                return $('#imageShow').animate( left: '720px' , 1000);
            

除了不透明度为 100% 外，一切正常，我不明白为什么。 感谢您的帮助：D

【问题讨论】：

您从未将其设置回 1.0？

我试过了，还有很多其他方法

【参考方案1】：

存在三个问题。

1) 要将不透明度设置为 100%，请使用 '1' 而不是 ' '。

2) 在 jQuery 动画完成后执行某些内容的更简单方法是将其作为回调函数注入，如下面的代码所示。

3) 您的代码在几个地方没有正确关闭。当你写像(function() 这样的东西时，你必须记住用)关闭它以获得正确的语法：(function() ...)。

这里是固定代码：

    $(function () 
        $('#imageShow').click(function (evt) 
            evt.preventDefault();
            $('#imageShow').css( opacity: 0.5 );
            var isfade = true;
            $('#imageShow').animate( left: '720px' , 1000, function() 
                if (isfade) 
                    $('#imageShow').css( opacity: 1.0 );
                
            );
        );
    );

这是一个 JFiddle 示例：https://jsfiddle.net/szq4s172/1/

【讨论】：

此代码不能正常工作。使图像褪色然后对其进行动画处理，但是当图像完成时，动画移动不会变成不透明度 1

对不起，如果您逐字复制我的代码，则存在拼写错误。我修好了它。此外，如果您想淡化，请尝试在不透明度上调用 animate() 而不是 css()。