-3

マージンを変更して、divを横に移動し、トランジションを使用して元に戻そうとしています。マージンを切り替えたいボタンが1つあります。div は右に移動しますが、もう一度クリックしても元の位置に戻りません。これは私が持っているものです:

HTML

<div id="movingdiv">
<a href="#" onclick="toggle()">Click Me!</a>
</div>

CSS

#movingdiv {
overflow: hidden;
left: 0;
top: 0;
right: 0;
bottom: 0;
background-color: gray;
-webkit-transition-duration: 0.3s;
-moz-transition-duration: 0.3s;
-o-transition-duration: 0.3s;
transition-duration: 0.3s;
}

JavaScript

function toggle () {

var el = document.getElementById("movingdiv");
if ( el.style.marginLeft="250px" ) {

    el.style.marginLeft="250px";

}

else {

    el.style.marginLeft="0px";

}

}

これが実際に動作しています: http://codepen.io/dakoder/pen/nfimJ

4

3 に答える 3

5

同等性をチェックする代わりに、割り当てを行っています。さらに、あなたはあなたのelse状態とif状態が混ざっています。次のように変更します。

if ( el.style.marginLeft==="250px" ) {
    el.style.marginLeft="0px";
} else {
    el.style.marginLeft="250px";
}
于 2013-01-09T22:24:39.380 に答える
1

への変更

if ( el.style.marginLeft==="250px" ) {
于 2013-01-09T22:24:50.110 に答える
1 
if ( el.style.marginLeft="250px" ) {

これは割り当てであり、比較ではありません。マージンを切り替えたい場合は、===、または！==を使用します（意図しているように見えます）。

于 2013-01-09T22:24:55.520 に答える