Question

这是演示链接 - http://codepen.io/malithmcr/pen/CpDnB/

我左侧有两个或更多div，右侧有4个div，当我点击left1 class时我需要为右侧div设置动画，然后我需要为右侧div设置动画效果＆＃39;当我点击left2 class ..

JQUERY

$(document).ready(function(){
       $(".left1").click(function(){
             $('.right01').stop().animate({'margin-left': '10px'}, 600);
             $('.right02').stop().animate({'margin-left': '200px'}, 1000);
             $('.right03').stop().animate({'margin-left': '300px'}, 1200);
             $('.right04').stop().animate({'margin-left': '50px'}, 300);
       }, function(){
             $('.right01').stop().animate({'margin-left': '100%'}, 200);
             $('.right02').stop().animate({'margin-left': '100%'}, 400);
             $('.right03').stop().animate({'margin-left': '100%'}, 500);
             $('.right04').stop().animate({'margin-left': '100%'}, 800);
       });
});

HTML

<div class="left1">Left one</div>
<div class="left2">Left one</div>
<div class="right01">right one</div>
<div class="right02">right 2</div>
<div class="right03">right 3</div>
<div class="right04">right 4</div>
</div>

CSS

.right01{float:left;margin-left:100%;}
.right02{float:left;margin-left:100%;}
.right03{float:left;margin-left:100%;}
.right04{float:left;margin-left:100%;}

谢谢

Answer 1

附加两个点击事件：

$(document).ready(function(){
    $(".left1").click(function(){
        $('.right01').stop().animate({'margin-left': '10px'}, 600);
        $('.right02').stop().animate({'margin-left': '200px'}, 1000);
        $('.right03').stop().animate({'margin-left': '300px'}, 1200);
        $('.right04').stop().animate({'margin-left': '50px'}, 300);
   });
    $(".left2").click(function(){
       $('.right01').stop().animate({'margin-left': '100%'}, 200);
        $('.right02').stop().animate({'margin-left': '100%'}, 400);
        $('.right03').stop().animate({'margin-left': '100%'}, 500);
        $('.right04').stop().animate({'margin-left': '100%'}, 800);
    });
});

请参阅此Demo

单击其他div不工作时，Jquery动画回来

1 个答案: