web-dev-qa-db-ja.com

jquery無限アニメーションを作成する方法は？

私は、3つの色で体の背景をアニメーション化する無限ループを備えたjQuery関数を実装しようとしています。ナイスでクリーンなソリューションは考えられません。このようなもの？

$(document).ready(function(){                
     $('body').animate({backgroundColor:'#ffcc00'}, 500, function(){
        $('body').animate({backgroundColor:'#eeeeee'}, 500, function(){
           $('body').animate({backgroundColor:'#3b5998'}, 500);
       });
   });
});

何か案が？

jqueryloopsjquery-animate
18
Mauro74

ネストを削除できますが、解決策は少し太っています。

var cols = "#ffcc00,#eeeeee,#3b5998".split(",")
var cPos = 0

$(document).ready(function() {
   swapC()
}    

function swapC() {
    $('body').animate({ backgroundColor:cols[cPos] }, 500)
    cPos++
    if (cPos == cols.length) {
        cPos = 0
    }
    window.setTimeout(function() { swapC() }, 500)
}
11
Diodeus - James MacFarlane
$(document).ready(function(){
    function animate() {
        $('body').animate({backgroundColor:'#ffcc00'}, 500, function(){
            $('body').animate({backgroundColor:'#eeeeee'}, 500, function(){
                $('body').animate({backgroundColor:'#3b5998'}, 500, function(){
                    animate();
                });
            });
        });
    }
    animate();
});
21
Cesar
$(document).ready(function(){
    colors = ['#FFB30C', '#58EC00', '#0087EC', '#EEEEEE', '#FF5A00' ]
    var i = 0;
    animate_loop = function() {
            $('body').animate({backgroundColor:colors[(i++)%colors.length]
            }, 500, function(){
                        animate_loop();
            });
    }
    animate_loop();
});

デモ： http://jsfiddle.net/bHEVr/

8
fitorec
$(".elementsToAnimate").each(function setAnim(){
    $(this).
            animate({backgroundColor:'#ffcc00'},500).
            animate({backgroundColor:'#eeeeee'},500).
            animate({backgroundColor:'#3b5998'},500,setAnim);
});
6
lintabá

Animate（）のコールバックでアニメーション関数を呼び出します。

jQueryフォーラム のこの例を参照してください

jQuery.fn.fadeInOut = function() {
        var newOpacity = this.is(":visible") ?  0 : 1;
        this.animate({ opacity: newOpacity }, function() {
                $(this).fadeInOut();
        });
        return this;
};

$("#mydiv").fadeInOut();
3
powtac

むしろイベント駆動型のアプローチを使用します。

$(document).ready(function(){
  $('body').on('color1', function () {
    $(this).animate({backgroundColor:'#ffcc00'}, 500, function(){
      $(this).trigger('color2');
    });
  });

  $('body').on('color2', function () {
    $(this).animate({backgroundColor:'#eeeeee'}, 500, function(){
      $(this).trigger('color3');
    });
  });

  $('body').on('color3', function () {
    $(this).animate({backgroundColor:'#3b5998'}, 500, function(){
      $(this).trigger('color1');
    });
  });

  // Kick-off the infinite loop by firing one of the events
  $('body').trigger('color2');
});

このソリューションの実際をご覧ください。

http://jsfiddle.net/perituswebdesign/f5qeo6db/1/

3
David Faber
function blabla(){
 $('body').animate({backgroundColor:'#ffcc00'}, 500, function(){
        $('body').animate({backgroundColor:'#eeeeee'}, 500, function(){
           $('body').animate({backgroundColor:'#3b5998'}, 0,function (){
               setTimeout(blabla,500);
           });
       });
   });

}

[〜＃〜] untested [〜＃〜]

1
Val

これを試してください： http://jsfiddle.net/hBBbr/

$(document).ready(function(){

animate_loop = function animate_loop(){
        $( "#animated_banner" ).animate({
            opacity: 0.1, 

          }, 1000,function(){
               $( "#animated_banner").animate({ opacity: 1},1000)
                 animate_loop();
        } );    
}

animate_loop();  

});
0
Perera1987

私はそれが数年後であることを知っていますが、これはjquery v1.10.2で私にとってそうであったのと同じように誰かにとってまだ問題であると思う。とにかく、それを処理しようとして数時間後、私は このプラグイン で複数のレイヤー化された背景に次のコードを使用することになりました：

// Self-calling functions for animation auto-repeat
var cssanimfx={
    bgb:function(o){
      o=$(o?o:this);
      o.css({backgroundPosition:'0px 0px'}).animate({backgroundPosition:"3000px -3000px"},500000,'linear',cssanimfx[o.attr('id')]);
    },
    bgm:function(o){o=$(o?o:this);o.css({backgroundPosition:'0px 0px'}).animate({backgroundPosition:"3000px -3000px"},250000,'linear',cssanimfx[o.attr('id')])},
    bgf:function(o){o=$(o?o:this);o.css({backgroundPosition:'0px 0px'}).animate({backgroundPosition:"3000px -3000px"},50000,'linear',cssanimfx[o.attr('id')])}
    // ...
}
// Initialize animation
for(id in cssanimfx)cssanimfx[id]('#'+id);

命名スキームは次のとおりです。ネストされた[〜＃〜] div [〜＃〜]sを作成し、それらを指定します[〜＃〜] id [〜＃〜]s in HTML。 JSパートでは、同じ[〜＃〜] id [〜＃〜]sが、すべてのselfを含むオブジェクトのプロパティのキーイングに使用されます-アニメーションの終了時に呼び出します。 デモはこちら

0
Getsov

jQueryタイミングプラグイン（2KB）（ GitHub ＆ Docs ）を強くお勧めします。

使いやすい無限のアニメーションなどを提供します。ご覧ください：

$(document).ready(function(){    

 $('body').animate({backgroundColor:'#ffcc00'}).wait(500)
          .animate({backgroundColor:'#eeeeee'}).wait(500)
          .animate({backgroundColor:'#3b5998'}).wait(500)
});
0
mate64