2

短い単純なJqueryアニメーションコードを作成しました。これはrel属性を取り、それをすべてのli.slideのアニメーション入力に使用します。それは機能しますが、これを行うための最良の方法ではないかもしれないと私は感じています。簡素化/最適化できますか、それとも問題ではありませんか？

ありがとう

Javascript/Jqueryの若者

$('.slide', this).each(function() {
    var rel = $(this).attr('rel');
    var coord = rel.split(',');

    var $delay = parseInt(coord[2]);
    var $transition = coord[3];
    var $duration = parseInt(coord[4]);

    $(this).delay($delay).animate({'background-position-x' : '50%', 'background-position-y' : '0', opacity : '1'},$duration, $transition);

 });

HTMLの例：

<li class="slide" rel="50%,300px,600,linear,200"></li>
4

1 に答える 1

1

ちょっとしたことは、relの代わりにdata-*属性を使用することです。html5doctor.com

jQuerysアニメーション関数の使用をスキップして、アニメーションの外部ですべての計算を実行することもできます。計算の配列を保存し、setInterval関数で繰り返します。これはまた、トゥイーンだけを使用しない、より創造的な開発への扉を開きます。

私はあなたが自由に使えるいくつかの作品をgithubで公開しました。アニメーションをチェックしてください。これは、シンプルなインターフェイスを備えたアニメーションの複雑な計算のライブラリです。

アップデート

そのまま使用したり、インスピレーションを得たりできるJavaScriptの作成が完了しました。

https://github.com/erik-landvall/animator

于 2012-04-27T18:54:21.883 に答える