Question

对于我的幻灯片放映，图像应该在图像淡出后更改，但图像会在图像更改之前发生变化。换句话说，图像会发生变化，然后淡出并淡入。我在更改图像源之前放置了fadeOut方法。

HTML

<div class="image-section">
    <img src="img/seattleskyline.jpg" alt="Seattle Skyline" id="center-image" />
    <div class="caption">I still have absolutely no idea what this building is</div>
    <button id="sliderLeft"></button>
    <button id="sliderRight"></button>
</div>

CSS

#center-image
{
    width: 100%;
    height: 480px;
}

.image-section
{
    margin-left: auto;
    margin-right: auto;
    width: 75%;
    position: relative;
    text-align: center;
}

.image-section .caption
{
    position: absolute;
    bottom: 4px;
    width: 100%;
    text-align: center;
    color: white;
    background: #474747;
    height: 50px;
    line-height: 50px;
    opacity: 0.8;
    font-size: 20px;
}

.image-section #sliderLeft
{
    position: absolute;
    display: none;
    width: 25px;
    height: 100px;
    top: 50%;
    margin-bottom: 50px;
    left: 0;
    opacity: 0.7;
    border: 0;
}

.image-section #sliderRight
{
    position: absolute;
    display: none;
    width: 25px;
    height: 100px;
    top: 50%;
    margin-bottom: 50px;
    right: 0;
    opacity: 0.7;
    border: 0;
}

JS

var images = ["img/seattleskyline.jpg", "img/spaceneedle.jpg", "img/ferriswheel.jpg"]
var index = 0;

    $(document).ready(function() {
        $("#sliderRight").fadeIn(1000);
        $("#sliderLeft").fadeIn(1000);

        function changeImage()
        {
            index++;
            if (index > images.length - 1)
            {
                index = 0;
            }
            var target = document.getElementById("center-image");
            $("#center-image").fadeOut(1000)
            target.src = images[index]; 
            $("#center-image").fadeIn();
        }

        setInterval(changeImage, 4000);
    });

Answer 1

您可以使用fadeOut函数http://api.jquery.com/fadeout/的complete回调参数

像这样：

$("#center-image").fadeOut(1000, function(){
        target.src = images[index];
        $("#center-image").fadeIn(); 
});

Answer 2

如您所知，fadeOut需要1000毫秒才能完成。 Javascript不知道这个并不关心所以它启动淡出然后立即更改图像（下一行代码）。幸运的是，jQuery允许您在fadeOut上指定回调方法。试试这个版本的changeImage()：

function changeImage()
{
    index++;
    if (index > images.length - 1)
    {
        index = 0;
    }
    var target = document.getElementById("center-image");
    $("#center-image").fadeOut(1000, function() {
        target.src = images[index]; 
        $("#center-image").fadeIn();
    });
}

此代码未经测试，但它肯定会让您走上正轨。干杯！

JQuery Slider在淡出之前更改图像

2 个答案: