如何在启动另一个循环功能时通过单击停止 jquery 循环功能

Question

嗨，我是编程的初学者，所以我不太熟悉使用 jQuery，但我想用它解决问题。

我正在尝试制作一个 "animation/Slideshow"，其中我有两个不同的绿色烟雾图像，它们会淡入淡出，所以它的移动有点像 'real' 烟雾。我可以在 jQuery 中做到这一点，所以它是循环的，但是我想在单击特定按钮时停止绿色烟雾循环的这个功能，同时另一个类似的循环功能开始，但是使用另一种颜色的烟雾图像，比如红色或蓝色。

我在 jQuery 中有此代码：

function startSlideshow(){
    $(".greensmoke1").fadeIn(2000).delay(1500).fadeOut(2000); //13000
    $(".greensmoke2").delay(5000).fadeIn(2000).delay(1500).fadeOut(2000, startSlideshow); //55000
}

$(document).ready(function(){
    startSlideshow();
});

我的css：

.greensmoke1 {
    background-position: center;
    background-image: url(game/scene11.png);
    width: 880px;
    height: 660px;
    background-size: 100%;
    background-repeat: no-repeat;
    position: relative;
    margin: 0 auto;
    overflow: hidden;
    display: none;
}

.greensmoke2 {
    background-position: center;
    background-image: url(game/scene11b.png);
    width: 880px;
    height: 660px;
    background-size: 100%;
    background-repeat: no-repeat;
    position: relative;
    margin: 0 auto;
    overflow: hidden;
    display: none;
}

我不知道如何制作一个停止循环的按钮，所以我尝试在 CSS 中制作一个可点击的框，当你点击它时，烟雾 "visibility" 会是设置为 "hidden"。它有效，但对我来说似乎有点混乱。

$(function() {
    $("#button").click(function(e){
        $(".greensmoke1").css("visibility", "hidden");
        $(".greensmoke2").css("visibility", "hidden");
    });
}

我有点希望当您单击#button 时它会停止循环但同时开始一个新循环直到您单击另一个按钮。

我希望你能帮助它困扰我两天了！谢谢！

更新

我只是尝试像这样添加 Vladimir 的代码：

$(document).ready(function() {
    function startSlideshow(){
        $(".greensmoke1").fadeIn(2000).delay(1500).fadeOut(2000); //13000
        $(".greensmoke2").delay(5000).fadeIn(2000).delay(1500).fadeOut(2000, startSlideshow); //55000
    }

    $(document).ready(function(){
        startSlideshow();
    });

    $("#button").on("click",function(){
        $(".greensmoke1").css ("visibility", "hidden");
        $(".greensmoke2").css ("visibility", "hidden");
        $(".bluesmoke1").fadeIn(2000).delay(1500).fadeOut(2000); //13000
        $(".bluesmoke2").delay(5000).fadeIn(2000).delay(1500).fadeOut(2000, startSlideshow); //5500
    });

});

我添加了 ("visibility","hidden");因为我想阻止绿烟（隐藏它们，即使它们是 display:none；在 css 中）。该按钮与之配合使用，因为绿色烟雾消失了，但它并没有被蓝色烟雾动画取代。即使我没有添加 ("visibility","hidden");代码。

我真的不知道这段代码有什么问题，因为当我点击它隐藏烟雾的按钮时它起作用了，但它不会开始添加蓝色烟雾.. :/

我去试试guest271314的代码，回来更新！ :)

Answer 1

你可以试试:

   $(document).ready(function(){ 
        $("#button").on('click',function(){
             $(".greensmoke1").fadeIn(2000).delay(1500).fadeOut(2000); //13000
             $(".greensmoke2").delay(5000).fadeIn(2000).delay(1500).fadeOut(2000, startSlideshow); //5500
        }
    }

或类似的东西。我认为您可以使用任何元素代替 #button。如果有帮助，请告诉我。

Answer 2

尝试

$(document).ready(function () {
    // added `class*=smoke` selector for `greensmooke` or `bluesmoke`
    var smoke = $("[class*=smoke]");   
    function startSlideshow() {    
        $(".greensmoke1").fadeIn(2000).delay(1500).fadeOut(2000)
        .siblings(".greensmoke2").delay(5000).fadeIn(2000)
        .delay(1500).fadeOut(2000, function () {
            if (smoke.data("stop")) {
                smoke.stop(true, true)
            } else {
                startSlideshow()
            }
        });
    };
    startSlideshow();
    $("button").on("click", function () {
        // stop slideshow
        smoke.data("stop", true)
        // check `background-image` , `backgroundColor`
        .css("backgroundColor", smoke.eq(0)
        // toggle `background-image` , `backgroundColor`
        .css("backgroundColor") === "rgb(0, 128, 0)" ? "blue" : "green")
        // start slideshow
        .data("stop", false);
        startSlideshow()
    })
});

$(document).ready(function () {
    var smoke = $("[class*=smoke]"); 

    function startSlideshow() {

        $(".greensmoke1").fadeIn(2000).delay(1500).fadeOut(2000)
        .siblings //13000        
        
    (".greensmoke2").delay(5000).fadeIn(2000)
        .delay(1500).fadeOut(2000, function () {
            if (smoke.data("stop")) {
                smoke.stop(true, true)
            } else {
                startSlideshow()
            }
        }); //55000
    };
    startSlideshow();
    $("button").on("click", function () {
        smoke.data("stop", true)
            .css("backgroundColor", smoke.eq(0).css("backgroundColor") === "rgb(0, 128, 0)" ? "blue" : "green")
            .data("stop", false);
        startSlideshow()
    })
});

.greensmoke1, .greensmoke2 {
    background-position: center;
    background-color: green;
    width: 880px;
    height: 660px;
    background-size: 100%;
    background-repeat: no-repeat;
    position: relative;
    margin: 0 auto;
    overflow: hidden;
    display: none;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<button>click</button>
<div class="greensmoke1"></div>
<div class="greensmoke2"></div>

如何在启动另一个循环功能时通过单击停止 jquery 循环功能

How to stop jquery loop function by a click while starting another loop function

css

jquery

animation

loops

function