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

Question

我的 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

Answer 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/