Question

所以我有这个基本的脚本，在三个图像之间交替，我想添加一个简单的fadein / fadeout / fadeto或任何看起来最好的，所以它不是那么笨重。我怎样才能做到这一点？或者，有更好的方法吗？

<div class="row flex-row">
    <div class="col-sm-6">
        <div class="list-group">
            <div class="list-group-item">
                <h4 class="list-group-item-heading">Soveværelser</h4>
                <ul class="ul-with-bullets">
                    <li>Nr. 1: Dobbeltseng(e) (2 Sovepladser)</li>
                    <li>Nr. 2: Enkeltseng(e) (2 Sovepladser)</li>
                </ul>
            </div>
        </div>
    </div>
    <div class="col-sm-6">
        <div class="list-group">
            <div class="list-group-item">
                <h4 class="list-group-item-heading">Toiletter</h4>
                <ul class="ul-with-bullets">
                        <li>Nr 1: WC. Varmt og koldt vand</li>
                    </ul>
            </div>
        </div>
    </div>
    <div class="col-sm-6">
        <div class="list-group">
            <div class="list-group-item">
                <h4 class="list-group-item-heading">Toiletter</h4>
                <ul class="ul-with-bullets">
                        <li>Nr 1: WC. Varmt og koldt vand</li>
                        <li>Nr 1: WC. Varmt og koldt vand</li>
                        <li>Nr 1: WC. Varmt og koldt vand</li>
                        <li>Nr 1: WC. Varmt og koldt vand</li>


                    </ul>
            </div>
        </div>
    </div>
    <div class="col-sm-6">
        <div class="list-group">
            <div class="list-group-item">
                <h4 class="list-group-item-heading">Toiletter</h4>
                <ul class="ul-with-bullets">
                        <li>Nr 1: WC. Varmt og koldt vand</li>
                    </ul>
            </div>
        </div>
    </div>
    <div class="col-sm-6">
        <div class="list-group">
            <div class="list-group-item">
                <h4 class="list-group-item-heading">Toiletter</h4>
                <ul class="ul-with-bullets">
                        <li>Nr 1: WC. Varmt og koldt vand</li>
                    </ul>
            </div>
        </div>
    </div>
</div>

Answer 1

您可以在页面中放置两个图像元素。一个用于当前图像，一个用于下一个图像。

一旦显示图像的时间过去了，就在可见图像上应用CSS类，将其不透明度转换为0.

转换完成后，将图像源替换为要显示的下一个图像。将图像元素放在现在对用户可见的图像元素后面，并删除转换CSS。

Answer 2

您可以使用以下内容。 Source, W3 Schools. See here for the jQuery include

$(document).ready(function(){
    $(".btn1").click(function(){
        $("p").fadeOut()
    });
    $(".btn2").click(function(){
        $("p").fadeIn();
    });
});

然而，这使用jQuery。根据您的限制，您可能无法使用此功能。有关fadeIn(time)和fadeOut(time)函数的详细信息，请结帐W3's article!

Answer 3

您可以在更改src：

之前设置图像的不透明度

function displayNextImage() {
    x = (x === images.length - 1) ? 0 : x + 1;
    var imgvar = document.getElementById("img");
    imgvar.classList.add("fadeOut");
    setTimeout(function() {
        imgvar.src = images[x];
        imgvar.classList.remove("fadeOut");
    }, 500);
}
function displayPreviousImage() {
    x = (x <= 0) ? images.length - 1 : x - 1;
    var imgvar = document.getElementById("img");
    imgvar.classList.add("fadeOut");
    setTimeout(function() {
        imgvar.src = images[x];
        imgvar.classList.remove("fadeOut");
    }, 500);
}
function startTimer() {
    setInterval(displayNextImage, 3000);
}
    var images = [], x = -1;
    images[0] = "assets/img/logo1.png";
    images[1] = "assets/img/logo2.png";
    images[2] = "assets/img/logo3.png";

在CSS中：

img {
     opacity: 1;
     transition: opacity 500ms ease-in-out;
}
img.fadeOut {
    opacity: 0;
}

注意：我在javascript中添加了500毫秒的timeOut，因为我怀疑否则动画根本不可见，因为它会立即从可见变为不可见再到可见。

Answer 4

每次调用其中一个函数时，您都可以尝试使用animate.css为html标记设置动画。

https://github.com/daneden/animate.css

在JS脚本中添加淡入淡出功能？

4 个答案: