[英]Animate function in javascript, I need to animate something when I click on it so that one div goes 1 way and the other div goes the other way
The code I am working with looks like this 我正在使用的代码如下所示
<script>
(function($){
$(document).on('click', '.tile', function(){
$(this).addClass('active');
$('.tile:not(.active):eq(0)').animate({top: -900, left: 180});
$('.tile:not(.active):eq(1)').animate({top: 900, left: -180});
});
$(document).on('click', '.active', function(){
$('.tile:not(.active):eq(0)').animate({top: 0, left: 0});
$('.tile:not(.active):eq(1)').animate({top: 0, left: 0});
$(this).removeClass('active');
});
})(jQuery);
</script>
I cannot work out how I can adapt this code to fit my html. 我不知道如何修改此代码以适合我的html。 My current html is this:
我当前的html是这样的:
<div class="container" id= "left" >
<h1 style="color:white"><a>HAIR</a></h1>
</div>
<div class= "container" id= "center">
<h1 style="color:white"><a>BEAUTY<a/></h1>
</div>
<div class="container" id= "right">
<h1 style="color:white"><a>BARBERS</a></h1>
</div>
</div>
Can anyone please help? 谁能帮忙吗? Many thanks
非常感谢
this should do the trick. 这应该可以解决问题。
<script>
(function($){
$(document).on('click', '.container', function(){
$(this).addClass('active');
$('.container:not(.active):eq(0)').animate({top: -900, left: 180});
$('.container:not(.active):eq(1)').animate({top: 900, left: -180});
});
$(document).on('click', '.active', function(){
$('.container:not(.active):eq(0)').animate({top: 0, left: 0});
$('.container:not(.active):eq(1)').animate({top: 0, left: 0});
$(this).removeClass('active');
});
})(jQuery);
</script>
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.