Jquery：トグルでアニメーションをトリガーする

Question

クリックすると4つのdivが斜めに区切られます。私の質問は、元の場所に戻すにはどうしたらいいですか？私はトグル機能を試しましたが、出力が乱れました...また、JavaScriptコードを減らす方法はありますか？

HTML：

<div class="container"> 

     <div class="main-square"> 

      <div class="square" id="1"></div> 
      <div class="square" id="2"></div> 
      <div class="square" id="3"></div> 
      <div class="square" id="4"></div> 
      <div class="trigger"><h1>Trigger</h1></div> 

     </div> 

    </div> 

CSS：

.container{ 

    width:100%; 
    max-width: 960px; 
    background-color: yellow; 
    margin-left: 40px; 
    margin-right: 40px; 
    display: block; 
    margin: 0 auto; 
    padding-top: 60px; 
    padding-bottom: 60px; 

} 

.main-square{ 
    padding-top: 40px; 
    padding-bottom: 40px; 
    width: 60%; 
    background-color: aqua; 
    margin: 0 auto; 
    text-align: center; 
    position:relative; 
} 

.square{ 

    position:relative; 
    width: 200px; 
    height: 200px; 
    background-color: red; 
    display: inline-block; 


} 

.trigger{ 

    position:absolute; 
    background-color: gainsboro; 
    left:235px; 
    top:200px; 
} 

のjQuery：代わりに

$(document).ready(function(){ 

    $('.trigger').click(function(){ 
     $('#1').animate({left: '-=100', top: '-=100'}, 1000); 
     $('#2').animate({right: '-=100', top: '-=100'}, 1000); 
     $('#3').animate({right: '+=100', top: '+=100'}, 1000); 
     $('#4').animate({left: '+=100', top: '+=100'}, 1000); 

    }); 

}); 

Answer 1

使用CSS3の変換と移行します。ちょうど正方形の新しい位置のクラスを切り替えるには、jQueryのを使用してCSSを使用して、残りを定義する（ただし、ユニークなクラス名の代わりに、固有のIDを使用）

をここでjQueryの：

$(document).ready(function(){ 
$('.trigger').click(function(){ 
     $('.sq-one').toggleClass("move"); 
     $('.sq-two').toggleClass("move"); 
     $('.sq-three').toggleClass("move"); 
     $('.sq-four').toggleClass("move"); 
    }); 
}); 

をとCSSについて：

.square{ 
    position: relative; 
    width: 200px; 
    height: 200px; 
    background-color: red; 
    display: inline-block; 
    transform: translate(0); 
    transition: all 1s ease; 
} 
.sq-one.move { 
    transform: translate(-100px, -100px); 
} 
.sq-two.move { 
    transform: translate(100px, -100px); 
} 
.sq-three.move { 
    transform: translate(-100px, 100px); 
} 
.sq-four.move { 
    transform: translate(100px, 100px); 
} 

私はフィドルを作成しました、見てみましょう：https://jsfiddle.net/3ggkvgw1/

Answer 2

をここにあります。私はjQueryのデータ属性を使用し、トリガーした後に値を追加し、クリックイベントを再トリガーするときに値をチェックします。

$(document).ready(function(){ 
 

 
    $('.trigger').click(function(){ 
 
     !$('#1').data('is-toggled') && $('#1').animate({left: '-=100', top: '-=100'}, 1000, function(){ $(this).data('is-toggled',true) }) || 
 
     $('#1').animate({left: '+=100', top: '+=100'}, 1000, function(){ $(this).data('is-toggled',false) }); 
 
     !$('#2').data('is-toggled') && $('#2').animate({right: '-=100', top: '-=100'}, 1000, function(){ $(this).data('is-toggled',true) }) || 
 
     $('#2').animate({right: '+=100', top: '+=100'}, 1000, function(){ $(this).data('is-toggled',false) }); 
 
     
 
     !$('#3').data('is-toggled') && $('#3').animate({right: '+=100', top: '+=100'}, 1000, function(){ $(this).data('is-toggled',true) }) || 
 
     $('#3').animate({right: '-=100', top: '-=100'}, 1000, function(){ $(this).data('is-toggled',false) }); 
 
     !$('#4').data('is-toggled') && $('#4').animate({left: '+=100', top: '+=100'}, 1000, function(){ $(this).data('is-toggled',true) }) || $('#4').animate({left: '-=100', top: '-=100'}, 1000, function(){ $(this).data('is-toggled',false) }) 
 

 
    }); 
 

 
});

.container{ 
 

 
    width:100%; 
 
    max-width: 960px; 
 
    background-color: yellow; 
 
    margin-left: 40px; 
 
    margin-right: 40px; 
 
    display: block; 
 
    margin: 0 auto; 
 
    padding-top: 60px; 
 
    padding-bottom: 60px; 
 

 
} 
 

 
.main-square{ 
 
    padding-top: 40px; 
 
    padding-bottom: 40px; 
 
    width: 60%; 
 
    background-color: aqua; 
 
    margin: 0 auto; 
 
    text-align: center; 
 
    position:relative; 
 
} 
 

 
.square{ 
 

 
    position:relative; 
 
    width: 200px; 
 
    height: 200px; 
 
    background-color: red; 
 
    display: inline-block; 
 

 

 
} 
 

 
.trigger{ 
 

 
    position:absolute; 
 
    background-color: gainsboro; 
 
    left:235px; 
 
    top:200px; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.2/jquery.min.js"></script> 
 
<div class="container"> 
 

 
     <div class="main-square"> 
 

 
      <div class="square" id="1">1</div> 
 
      <div class="square" id="2">2</div> 
 
      <div class="square" id="3">3</div> 
 
      <div class="square" id="4">4</div> 
 
      <div class="trigger"><h1>Trigger</h1></div> 
 

 
     </div> 
 

 
    </div>