0

ユーザーがボタンをクリックしてイベントがトリガーされたときに、margin-left css スタイルを div 要素に追加し、ユーザーがボタンを再度クリックしたときにそれを削除したいと考えています。

これは div 要素です。

<div id="container" class="content">

Javascript は次のように変更する必要があります。

<div id="container" class="content" style="margin-left:354px">

ジャンプするのではなく、左にスライドするように見えるアニメーションを使用するのが理想的です。

4

4 に答える 4

2

イベントリスナーでこれを試してください：

var cont = document.getElementById("container");
cont.style.marginLeft = cont.style.marginLeft === "354px" ? "auto" "354px";

これはアニメーション化されません。そのために CSS の使用を検討できます。

#container {
    transition: margin-left ease 500ms;
}

ただし、古いブラウザーと IE9 をサポートする場合は、soyuka の回答を参照してください。

于 2013-04-12T08:06:39.703 に答える
0

そのような質問を投稿する前に、マニュアルを読む必要があります...

$('.content').animate({'margin-left':'354px'}, 1000); 
//where 1000 is the animation time in ms

ロールバックするには:

$('.content').animate({'margin-left':'auto'}); //or your previous value
于 2013-04-12T08:07:01.303 に答える
0

このソリューションを試してみてください。

于 2013-04-12T08:12:53.450 に答える
-1

css 属性jQuery.animateと一緒に使用できます。margin-leftの 2 番目のパラメーターanimateは期間 (ミリ秒単位) です。アニメーションをより細かく制御できるようにするための設定が他にもたくさんあります (例: イージング インまたはイージング アウト)。

$('#container').animate({'margin-left':'354px'},3000);

反対に戻すには

$('#container').animate({'margin-left':'0px'},3000);

実際の例: http://jsfiddle.net/xdpCs/1/

于 2013-04-12T08:09:50.093 に答える