アニメーションが再生された場合にのみ、別のボタンをクリックしてボタンアニメーションを元に戻します。

Question

単純なボタンアニメーションがあります。 button1をクリックすると、別のボタン（button2）がアニメーション化されてその位置に移動し、button1がアニメーション化されて非表示になります。

また、ボタンの上にドロップダウン選択があります。ドロップダウンをクリックすると、アニメーションを元に戻す（後方に再生する）必要があるので、button1が再び表示され、ボタン2が非表示になります。しかし、button2が表示されている場合は、ドロップダウンをクリックしてアニメーションを元に戻す必要があります。

は私が similar questionを掲載コード

JS FIDDLE.

を簡略化しますが、私はそれがあまりにも複雑作っていたので、何の回答を得ませんでした。私はこれがより明確であり、物事を簡素化するのに役立つことを願っています

ありがとうございました！私が理解から

Htmlの

<div class="wrap"> 
    <select class="options"> 
    <option value="option1">Volvo</option> 
    <option value="option2">Saab</option> 
    <option value="option3">Fiat</option> 
    </select> 

    <div class="btn-wrap"> 
    <button class="btn1"> 
    Add to cart 
    </button> 
    <button class="btn2"> 
    Checkout 
    </button> 
    </div> 

</div> 

のCss

.wrap{ 
    width:100%; 
    height: 300px; 
    background: gray; 
} 

.btn-wrap{ 
    position:relative; 
    background:green; 
    max-width;200px; 
    width:200px; 
    height:40px; 
    overflow:hidden; 
    margin:4%; 
} 
button{ 
    width:200px; 
    height:40px; 
    border:0px; 
    outline:none; 
    color:white; 
    font-size:14px; 
    font-weight:bold; 
    display:inline-block; 
    cursor:pointer; 
} 

.btn1{ 
    background-color:blue; 
} 
.btn2{ 
    background-color:red; 
} 

.options{ 
    width:200px; 
    height:50px; 
    background:white; 
    margin:7%; 
    border:0px; 
    text-indent:20px; 
} 

JS

$(".btn-wrap").click(function() { 

    $('.btn1').css('position', 'relative').animate ({ top:'-40px' } ); 
    $('.btn2').css('position', 'relative').animate ({ top:'-40px' } ); 

}); 

Answer 1

、あなたがしなければならなかったすべて.optionがクリックされたかどうかをチェックするイベントを作成しています。

Demo

JS

let undo = false; 

$(".btn-wrap").click(function() { 
    if(undo == false) { 
     $('.btn1').css('position', 'relative').animate ({ top:'-40px' } ); 
     $('.btn2').css('position', 'relative').animate ({ top:'-40px' } ); 

     undo = true; 
    } 
}); 

$(".options").on("click", function() { 
    $('.btn1').css('position', 'relative').animate ({ top:'0px' } ); 
    $('.btn2').css('position', 'relative').animate ({ top:'20px' } ); 

    undo = false; 
})