0

項目の追加と削除 (追加と追加) があり、これをホバーとクリックの両方で一時停止したいと考えています。

以下に作成したカスタム関数を参照してください。特定のクラスのボタンをクリックしてこのシーケンスを一時停止し、同じボタンで再開できるようにしたいと思います（再生/一時停止タイプのもの。理想的には、アイテムが追加されているdivのホバーも一時停止します/削除されました。

この特定のシナリオの解決策を得ることは素晴らしいことですが、可能であればカスタム関数の一時停止/再開に関するより一般的なものもあると理解しています.stopは、関数が公式のjqueryでない限り機能しません

ヘルプ/ガイダンスは大歓迎です。私はこれにかなり慣れていないので、より完全な（馬鹿のガイド）説明が良いほど良いです

ありがとう！

$(function() {


   var SECONDS_BETWEEN = 5;
        var SLIDE_DURATION  = 1;
        var FADE_DURATION   = 1;

        var items = [];

         $(document).ready(function() {
            $('.item').each(function() {items.push($(this)); $(this).remove()});
            add_item();
        });

        function add_item() {
            var item = items.shift();


             item.removeAttr('style');
            item.find('.contentitem').removeAttr('style');   

            item.hide().prependTo('.innerwrapper')
                .slideDown(
                    SLIDE_DURATION*1000, 
                    function() {           
                        item.find('.contentitem').fadeTo('slow', 1);
                    }
                );


            items.push(item);


            setTimeout(add_item, SECONDS_BETWEEN*1000)


        }


});
4

1 に答える 1

2

これを行う簡単な方法は、ボタンのクリックからのコールバックなど、別の関数からアクセスできるフラグを保存することです。関数の開始時に、add_item()そのフラグが適切に設定されていることを確認して、続行できるようにする必要があります。

あなたの例では：

$(function() {
    var SECONDS_BETWEEN = 5;
    var SLIDE_DURATION  = 1;
    var FADE_DURATION   = 1;

    /* Define a flag to pause the animation */
    var paused = false;
    var items = [];

     $(document).ready(function() {
        $('.item').each(function() {items.push($(this)); $(this).remove()});
        add_item();
     });


     $(".togglebutton").click(function() {
         /* Toggle the animation */
         paused = !paused;
     });

    function add_item() {
        /* Check the flag */
        if(!paused) {
            var item = items.shift();
            item.removeAttr('style');
            item.find('.contentitem').removeAttr('style');   

            item.hide().prependTo('.innerwrapper')
                .slideDown(
                    SLIDE_DURATION*1000, 
                    function() {           
                        item.find('.contentitem').fadeIn('slow');
                    }
                );

            items.push(item);
        }
        setTimeout(add_item, SECONDS_BETWEEN*1000);
    }
});​​​

これはここで確認できます。

于 2012-11-27T15:35:40.447 に答える