Sign in to follow this  
ElyasMachera

[web] Jquery animate problem

Recommended Posts

Hello,
I just started learning jquery and this problem baffles me
I have divs in a container and when the mouse is over them it resizes the div and shifts the divs in front by a certain offset.
on mouseout it shifts the div by subtracting from that offset. This is the code if you are kind enough to look at it:

[code]

<html>
<head>
<script src="http://code.jquery.com/jquery-latest.js"></script>

<script language="JavaScript1.2">

function resize(obj)
{
shift(parseInt(obj.id[obj.id.length-1]));
$("#"+obj.id).height("100px").width("100px") ;

}

function shift(id)
{
for(var i=id+1;i<=4;i++)
{
$("#hello"+i).stop().animate({"left":"+=60px"},1000) ;
}
}

function shrink(obj)
{
$("#"+obj.id).height("64px").width("48px") ;
reshrink(parseInt(obj.id[obj.id.length-1]));

}
function reshrink(id)
{
document.getElementById('testvalue').innerHTML+=document.getElementById("hello2").style.left ;

for(var i=id+1;i<=4;i++)
{
$("#hello"+i).stop().animate({"left":"-=60px"},1000) ;
}

document.getElementById('testvalue').innerHTML+=document.getElementById("hello2").style.left ;
}
</script>
</head>

<body>

<h1>Hello World!</h1>
<div id="formWrapper" style="height:180;width:530;">

<div id="wrapper" style="position:relative;bottom:20px;width:460px;left:40px;height:160px;background-color:green;overflow:auto;" ">

<div id="hello1" style="position:absolute;left:0px;height:64px;bottom:0px;width:48px; background-color:black;color:white;" onmouseover="resize(this);" onmouseout="shrink(this)"></div>
<div id="hello2" style="position:absolute;left:49px;bottom:0px;height:64px;width:48px; background-color:maroon;color:white;" onmouseover="resize(this);" onmouseout="shrink(this)"></div>
<div id="hello3" style="position:absolute;left:98px;bottom:0px;height:64px;width:48px; background-color:brown;color:white;" onmouseover="resize(this);" onmouseout="shrink(this)"></div>
<div id="hello4" style="position:absolute;left:147px;bottom:0px;height:64px;width:48px; background-color:white;color:white;" onmouseover="resize(this);" onmouseout="shrink(this)"></div>

</div>

</div>

<div id="testvalue" style="position:absolute;top:390px;background-color:yellow;height:100px;width:400px;">

</div>

</body>
</html>
[/code]


It is quite simple really, nothing too complicated in it..
What I found is that when the mouseover and out is rapid or maybe the animation isn't complete..the divs change more than the offset and eventually it overlaps! :'(
Can someone please suggest how to solve this problem?
And thanks :).

EDIT:
To test rapidly move mouse over the first div..

Share this post


Link to post
Share on other sites
I have an idea how to solve problem
It IS because the animation hasn't completed..hence I am moving the div too early.
I just don't know how to tell the jquery to finish the animation before doing the what mouseover wants.
so maybe something


[code]
if(animationready)
do reshrink
[/code]

Share this post


Link to post
Share on other sites
[code]<!DOCTYPE html>
<html>
<head>
<script src="http://code.jquery.com/jquery-latest.js"></script>
<script>
$(document).ready(function(){
$("#wrapper div").hover (
function () {
$(this).stop(true,true).animate({height: "100px", width: "100px"}, { queue: true, duration: 1500 });
},
function () {
$(this).stop(true,true).animate({height: "64px", width: "48px"}, { queue: true, duration: 1500 });
}
);
});
</script>
<style>
#formWrapper {
height:180px;
width:530px;
}
#wrapper {
position:relative;
bottom:20px;
left:40px;
width:460px;
height:160px;
background:#49c057;
}
#hello1, #hello2, #hello3, #hello4 {
position:relative;
height:64px;
width:48px;
color:#FFF;
padding-bottom:0;
margin-bottom:0;
display:inline-block;
}
#hello1 {
background:#000;
}
#hello2 {
background:maroon;
}
#hello3 {
background:brown;
}
#hello4 {
background:#FFF;

}
</style>
</head>

<body>

<h1>Hello World!</h1>
<div id="formWrapper">

<div id="wrapper">

<div id="hello1" onmouseover="resize(this);" onmouseout="shrink(this)"></div>
<div id="hello2" onmouseover="resize(this);" onmouseout="shrink(this)"></div>
<div id="hello3" onmouseover="resize(this);" onmouseout="shrink(this)"></div>
<div id="hello4" onmouseover="resize(this);" onmouseout="shrink(this)"></div>

</div>

</div>

<div id="testvalue" style="position:absolute;top:390px;background-color:yellow;height:100px;width:400px;">

</div>

</body></html>[/code]

I too am pretty new to jQuery, but here's a quick crack I took at it. The only thing I couldn't manage was keeping the divs at the very bottom of their container.

Share this post


Link to post
Share on other sites
New as well..found as a way to solve it:
[url="http://pastebin.com/wMSHxpxW"]http://pastebin.com/wMSHxpxW[/url] position relative was the trick


Your code works well nice

Share this post


Link to post
Share on other sites
If you can, try to use absolute values for the movement then put
[code].clearQueue().stop()[/code]

before any animation

Share this post


Link to post
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now

Sign in to follow this