Question

我对jquery完全不熟悉而且我找不到我想要的东西所以我自己写了。目标是在单击上面的链接时创建图像淡入动画（从图像A到图像B）。

无论如何，它的行为不是我想要的......当快速/随机点击时它不够平滑。你能说一下吗？谢谢！

这是运行示例：

CSS：

...
.overlappingImage {position:absolute; left:0; top:0; display:none}
...

代码：

...
<script type="text/javascript">

        function FadeToImage(event, to_image_name, speed) {

        if (event != null)
            event.preventDefault();

        var currentImgWrapper = $("#dummy");

        var currentImg = currentImgWrapper.find('img');
        if (currentImg != null) currentImg.removeClass("overlappingImage");

        var newImgHTML = '<div id="dummy">' + '<img id="to_upper_image" src="' + to_image_name + '" class="overlappingImage"/>' + '</div>';

        if (currentImgWrapper.html() == null)
            $("#d").html(newImgHTML);
        else $("#d").html(currentImgWrapper.html() + newImgHTML);

        currentImgWrapper.fadeOut(speed);
        $("#to_upper_image").fadeIn(speed);

        $("#to_upper_image").removeAttr('id');
    }

    $(document).ready(function() {
        FadeToImage(null, 'img/1.JPG', 0);            

        $('a').first().click(function(event) {
            FadeToImage(event, 'img/2.JPG', 1000);
        });

        $('a').last().click(function(event) {

            FadeToImage(event, 'img/3.JPG', 1000);
        });

    });

    </script>

</head>
<body>
    <a href="#">CLICK 1</a> <a href="#">CLICK 2</a>
    <div id="d" style="position: relative; margin: 50px">
    </div>
</body>

...

Answer 1

为了使动画更流畅，您应该只在每个完成后执行后续淡入淡出：

currentImgWrapper.fadeOut(speed, function() {
    $("#to_upper_image").fadeIn(speed)
                        .removeAttr('id');
});

在jquery中单击锚链接时的图像淡出动画

1 个答案: