Jquery：用触发器触发动画

Question

我有四个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的data属性，并在触发后添加一个值，并在您重新触发click事件时检查它。

$(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>