|
jquery div animation problem
I have some question about jquery div animation. I want click the link, then div1 and div4 change the position. div2 and div3 change the position. the array postion is div1 div2 in the first line, div3 div4 in the second line. How to write correctly? Thanks.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title> </title>
<script type="text/javascript" src="jquery-1.4.2.min.js"></script>
<style type="text/css">
body{width:100%;height:100%;margin:0;padding:0;}
.content{width:600px;margin-left:auto;margin-right:auto;padding:0;}
.div1,.div2,.div3,.div4{float:left; width:300px; height:200px;margin:0;padding:0;position:relative;}
</style>
</head>
<body>
<div class="content">
<div class="div4" style="background-color:#0f0;"><a href="#" class="click">4</a>
</div>
<div class="div3" style="background-color:#f00;"><a href="#" class="click">3</a>
</div>
<div class="div2" style="background-color:#0ff;"><a href="#" class="click">2</a>
</div>
<div class="div1" style="background-color:#ff0;"><a href="#" class="click">1</a>
</div>
</div>
<script type="text/javascript">
$(function() {
$('.click').each(function() {
$(this).click(
function() {
$('.div1').stop().animate({ top: 200 , left: 300 });
$('.div2').stop().animate({ top: 200 , left: 0 });
$('.div3').stop().animate({ top: 0 , left: 300 });
$('.div4').stop().animate({ top: 0 , left: 0 });
})
});
});
</script>
</body>
</html>
1 Answer
<script type="text/javascript">
$(function() {
$('.click').bind('click', function(){
$('.div1').stop().animate({ top: 200 , left: 300 });
$('.div2').stop().animate({ top: 200 , left: 0 });
$('.div3').stop().animate({ top: 0 , left: 300 });
$('.div4').stop().animate({ top: 0 , left: 0 });
});
});
</script>
Posted: MacOS 1 of 1 people found this answer helpful. Did you? Yes No Hi, I want a effection like this
[code]
<script type="text/javascript">
$(function() {
$('.click').bind('click', function(){
$('.div1').stop().animate({ top: -200 , left: -300 });
$('.div2').stop().animate({ top: -200 , left: 300 });
$('.div3').stop().animate({ top: 200 , left: -300 });
$('.div4').stop().animate({ top: 200 , left: 300 });
});
});
</script>
[/code]
But except 'top' 'left',is there have another way to set that animate:div1's css position:top:0;left:0, div2's css position top:0;left:300,
div3's css position:top:200;left:0, div2's css position top:200;left:300
Thanks. [code]
<script type="text/javascript">
$(function() {
$('.click').bind('click', function(){
$('.div1').css({ top: 0 , left: 0 });
$('.div2').css({ top: 0 , left: 300 });
$('.div3').css({ top: 200 , left: 0 });
$('.div4').css({ top: 200 , left: 300 });
});
});
</script>
[/code]
Can Jquery animate set a css rules like this? and for my newbie, this one can not run the effection as the first one(I want the first effection) |
'youlichika' Status
Questions : 15
Answers : 8 Comments : 16 |
FOLLOW AWCORE
- Follow Us:
© Advanced Web Core. All rights reserved