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 动画完成后执行某些操作的更简单方法是将其作为回调函数注入(inject)，如下面的代码所示。

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/