Question

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

我正在尝试制作一个“动画/幻灯片”，其中我有两个不同的绿色烟雾图像，这些图像逐渐消失，所以它像“真正的”烟雾一样移动。我可以在jQuery中做到这一点，所以它循环，但我想停止绿色烟雾循环的功能，当我点击一个特定的按钮，而另一个类似的循环功能开始，但与另一种颜色的烟雾，如红色或蓝色的图像。 / p>

我在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中制作一个可点击的框，当你点击它时，烟雾“可见性”将被设置为“隐藏”。它有效，但对我来说似乎有点乱。

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

我有点想要当你点击#button它会停止循环但同时开始一个新的循环，直到你再点击另一个按钮。

我希望你现在可以帮助我两天烦恼！谢谢！

更新

我只是尝试像这样添加弗拉基米尔的代码：

$(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
    });

});

我添加了（“可见性”，“隐藏”）;因为我想要阻止绿色烟雾（隐藏它们，即使它们是显示：无;在css中）。按钮工作，因为绿烟消失，但它没有被蓝烟动画取代..即使我没有添加（“可见性”，“隐藏”）;代码。

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

我会尝试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循环函数

2 个答案: