Jquery: 使用切换触发动画

Question

我有四个 div，它们在点击时沿对角线分开。我的问题是：如何让它们 return 到达原点？我尝试了切换功能，但输出一团糟……另外，有没有办法减少 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 只是为了切换方块的新位置 class 并使用 CSS 定义其余部分（但使用唯一的 class 名称而不是唯一的 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);
}

我创建了一个fiddle，你看看：https://jsfiddle.net/3ggkvgw1/

Answer 2

在这里。我用的是jQuery的data属性，触发后加一个值，再触发点击事件时检查

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

Jquery: 使用切换触发动画

Jquery: triggering animation with toggle

jquery

animation

frontend