0

絶対に配置されたさまざまな次元の要素を含む html があります。それらすべてをアニメーション化し、幅と高さの半分の寸法にアニメーション化するなど、現在のものに対して幅と高さを変更します。現在、animate には相対的な増分または減分用の+=andがあります。-=

(a) しかし、私は半次元にアニメーション化する必要があるので、そのようなオプションはあります*=0.5か?

その後、アニメーションの後、リセット ボタンをクリックすると、寸法をリセットする必要があります。そのため、ベースの幅と高さをデータ属性に保存しました。しかし、再び$(this)内部では機能しません.animate()

(b)動作していないjsFiddleを確認してください。これに対する回避策はありますか？

それを使用できることはわかって.each()いますが、マークアップに多くの要素があるため、別のループは必要ありません。

私が欲しいものの動作バージョンであるjsFiddleを確認してください.each()。上で述べたように、html にはこれらの要素がたくさん含まれているため、このための別のループは必要ありません。

(c)とにかく、これを使用せずに達成できるものはありますかeach()? また、リセット機能が必要です (これらの要素はインライン スタイル属性を使用して配置されているため、スタイル属性の削除は機能しません)。

4

2 に答える 2

1

ステップ関数を使用できます: JSFiddle の例

しかし、私はあなたがそのように物事を行うことから本当の利益を得ることはないと思います.

私が行ったコードの変更:

shrink_ratio = 0.5;
$('button#trigger').click(function(){
    $('.object').animate({
        end: 1
    }, {
        duration: 500,
        step: function(now, fx) {
            startWidth = $(this).data('width');
            startHeight = $(this).data('height');
            $(this).css({width: startWidth - shrink_ratio * startWidth * now, 
                         height: startHeight - shrink_ratio * startHeight * now});
        },
        queue: false
    });
});

$('button#reset').click(function(){
    $('.object').animate({
        end: 0
    }, {
        duration: 500,
        step: function(now, fx) {
            startWidth = $(this).data('width');
            startHeight = $(this).data('height');
            $(this).css({width: startWidth - shrink_ratio * startWidth * now, 
                         height: startHeight - shrink_ratio * startHeight * now});
        },
        queue: false
    });
});
于 2013-08-09T10:23:49.783 に答える
0

.each() なしではできないと思います。遅延が心配な場合は、キューを経由せずにアニメーションを実行できます。また、アニメーションが同時クリックにどのように反応するかによって、リセット機能に stop(true, false) を追加します (および/またはその逆)。

于 2013-08-09T10:01:17.607 に答える