jquery（またはjavascript）を使用してボタンをクリックしてdivを移動する方法

Question

ボタンをクリックしたときに1つのフルスクリーンdivをビューに「プッシュ」し、1つを表示にするナビゲーションシステムを作成しようとしています。私のコードには2つの問題があります。

1. これは一度だけ動作します。ボタンをクリックした後、ページがリロードされない限り、アクションは再び実行されません。
2. 第2の問題は、ページ2を最初に選択する場合です.->ホーム - >ページ1。次に、ページ1は、ホームを左側に押し込む代わりにオーバーレイとして入ります。

問題のいずれかまたは両方を解決する方法を知っている人がいますか、同じ効果を得るためのより良い解決策をお持ちですか？現在のコードで

Codepen：http://codepen.io/a_ij/pen/XpZmvz

コード：

/* CSS */ 
 

 
html, body { 
 
    margin: 0; 
 
    padding: 0; 
 
    overflow: hidden; 
 
} 
 

 
#home { 
 
    position: absolute; 
 
    top: 0; 
 
    left: 0; 
 
    width: 100%; 
 
    min-height: 100vh; 
 
    margin: 0; 
 
    z-index: 9; 
 
    display: block; 
 
    background-color: #1abc9c; 
 
} 
 

 
#page1 { 
 
    position: absolute; 
 
    top: 0; 
 
    left: 100vw; 
 
    width: 100%; 
 
    min-height: 100vh; 
 
    margin: 0; 
 
    display: block; 
 
    z-index: 99; 
 
    background-color: #2ecc71; 
 
} 
 

 
#page2 { 
 
    position: absolute; 
 
    top: 100vh; 
 
    left: 0; 
 
    width: 100%; 
 
    min-height: 100%; 
 
    margin: 0; 
 
    display: block; 
 
    background-color: #3498db; 
 
} 
 

 
.moveleft { 
 
    transform:translate(-100vw, 0); 
 
    -moz-transform:translate(-100vw, 0); 
 
    -ms-transform:translate(-100vw, 0); 
 
    -webkit-transform:translate(-100vw, 0); 
 
    -o-transform:translate(-100vw, 0); 
 
    transition: transform 700ms; 
 
    -webkit-transition-timing-function: ease-in; 
 
    transition-timing-function: cubic-bezier(.86,.01,.77,.78); 
 
    -webkit-transition-delay: 200ms; 
 
    transition-delay: 200ms; 
 
} 
 

 
.movecenter { 
 
    transform: translate(0, 0); 
 
    -moz-transform: translate(0, 0); 
 
    -ms-transform: translate(0, 0); 
 
    -webkit-transform: translate(0, 0); 
 
    -o-transform: translate(0, 0); 
 
    transition: transform 700ms; 
 
    -webkit-transition-timing-function: ease-in; 
 
    transition-timing-function: cubic-bezier(.86,.01,.77,.78); 
 
    -webkit-transition-delay: 200ms; 
 
    transition-delay: 200ms; 
 
} 
 

 
.moveup { 
 
    transform: translate(0, -100vh); 
 
    -moz-transform: translate(0, -100vh); 
 
    -ms-transform: translate(0, -100vh); 
 
    -webkit-transform: translate(0, -100vh); 
 
    -o-transform: translate(0, -100vh); 
 
    transition: transform 700ms; 
 
    -webkit-transition-timing-function: ease-in; 
 
    transition-timing-function: cubic-bezier(.86,.01,.77,.78); 
 
    -webkit-transition-delay: 200ms; 
 
    transition-delay: 200ms; 
 
} 
 

 
.movedown { 
 
    transform: translate(0, 0); 
 
    -moz-transform: translate(0, 0); 
 
    -ms-transform: translate(0, 0); 
 
    -webkit-transform: translate(0, 0); 
 
    -o-transform: translate(0, 0); 
 
    transition: transform 700ms; 
 
    -webkit-transition-timing-function: ease-in; 
 
    transition-timing-function: cubic-bezier(.86,.01,.77,.78); 
 
    -webkit-transition-delay: 200ms; 
 
    transition-delay: 200ms; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 

 
<!-- HTML --> 
 
<div id="home"> 
 
    <button id="gop1">Page1</button> 
 
    <button id="gop2">Page2</button> 
 
</div> 
 
<div id="page1">Here is one page <button id="goh1">Home</button></div> 
 
<div id="page2">Here is the second page<button id="goh2">Home</button></div> 
 

 
<!-- Scripts --> 
 

 
<script> 
 
$(document).ready(function(){ 
 
     $('#gop1').click(function() { 
 
     $('#home, #page1').addClass('moveleft'); 
 
     }); 
 
    }); 
 
</script> 
 
<script> 
 
    $(document).ready(function(){ 
 
     $('#goh1').click(function() { 
 
     $('#home, #page1').addClass('movecenter'); 
 
     }); 
 
    }); 
 
</script> 
 
<script> 
 
    $(document).ready(function(){ 
 
     $('#gop2').click(function() { 
 
     $('#home, #page2').addClass('moveup'); 
 
     }); 
 
    }); 
 
</script> 
 
<script> 
 
    $(document).ready(function(){ 
 
    $('#goh2').click(function() { 
 
     $('#home, #page2').addClass('movedown'); 
 
     }); 
 
    }); 
 
</script>

あなたは、クラスを削除し、このようにそれを追加する必要があり

Answer 1

..

$(document).ready(function(){ 

    $('#gop1').click(function() { 
     $('#home, #page1').removeAttr('class'); 
    $('#home, #page1').addClass('moveleft'); 
    }); 


    $('#goh1').click(function() { 
     $('#home, #page1').removeAttr('class'); 
    $('#home, #page1').addClass('movecenter'); 
    }); 



    $('#gop2').click(function() { 
     $('#home, #page2').removeAttr('class'); 
    $('#home, #page2').addClass('moveup'); 
    }); 



$('#goh2').click(function() { 
    $('#home, #page2').removeAttr('class'); 
    $('#home, #page2').addClass('movedown'); 
    }); 

}); 

これをコピー＆ペーストするだけで問題ありません。

Answer 2

がこのようにスクリプトを変更し

：

<script> 
$(document).ready(function(){ 
     $('#gop1').click(function() { 
     $('#home, #page1').removeClass('movecenter'); 
      $('#home, #page1').addClass('moveleft'); 
     }); 
     $('#goh1').click(function() { 
     $('#home, #page1').removeClass('moveleft'); 
      $('#home, #page1').addClass('movecenter'); 
     }); 
     $('#gop2').click(function() { 
     $('#home, #page2').removeClass('movedown'); 
      $('#home, #page2').addClass('moveup'); 
     }); 
     $('#goh2').click(function() { 
     $('#home, #page2').removeClass('moveup'); 
      $('#home, #page2').addClass('movedown'); 
     }); 
    }); 
</script> 

私は複数の開閉scriptタグを削除し、それをよりシンプルにするために。しかし、それは問題ではありません。シンプルさのためだけです。 上記のコードに示すように、余分なremoveClassメソッドを追加することで問題は解決します。

Answer 3

@Minksmnmのソリューションは動作しますが、属性クラスを削除するのは適切ではありません。なぜなら、移行クラス以外のクラスがあり、これらの他のクラスを削除したくないからです。

@vvtxと@Parvezのソリューションは、2番目の問題を解決しません。

<script> 
    function removeTransitionClasses() { 
     $('#home, #page1').removeClass('moveleft'); 
     $('#home, #page1').removeClass('movecenter'); 
     $('#home, #page2').removeClass('moveup'); 
     $('#home, #page2').removeClass('movedown'); 
    }; 
</script> 

をし、すべてのclickコールバックに移行クラスを追加する前にこの関数を呼び出す：

は、私はあなたが関数を作成することをお勧めします。