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>

Jquery：用切换触发动画

2 个答案: