asked on

Problem with small jQuery animation

Hi,

I have a small JQuery animation where 1 div has a background image and another div has an img of a paint brush that together they move across the screen like a paint brushing across the page. (see styliststudioinc.com).
I am very new to JQuery, and just can't get this to work right.
At the very end of the screen, I would like the paint brush to just stop and fade out. Instead it jumps to the bottom of the page and then fades out.
How can I get this to work right?
Thanks

$(document).ready(function() {

       $("#Bar").animate({
          width: "80%"
       }, 5000, function() {
       $("#pic").animate({ 
            marginLeft: '80%'
        }, 0, function() { $(this).stop(true, true).fadeOut() });
        });
    });

Open in new window

SOLUTION

dhawalseth

membership

This solution is only available to members.

To access this solution, you must be a member of Experts Exchange.

Start Free Trial

Sheritlw

ASKER

I don't have a js file. The only code I use for the animation is what I posted.
I have read a lot about jQuery, but I still don't understand it.
What do I need to do to make this work?

Thanks

SOLUTION

Tom Beck

membership

This solution is only available to members.

To access this solution, you must be a member of Experts Exchange.

Start Free Trial

ASKER CERTIFIED SOLUTION

Sheritlw

membership

This solution is only available to members.

To access this solution, you must be a member of Experts Exchange.

Start Free Trial

Tom Beck

It doesn't look any different at styliststudioinc.com. The brush animation still disappears after split second and never returns on a page refresh. The script you are posting here still does not appear anywhere on the rendered page.

Sheritlw

ASKER

?? A new user will not have the images from the default.aspx page cached so I needed to make this redirect to preload the default.aspx page.
I tested by clearing my cache and the brush would bounce to it's starting position before the default.aspx page was loaded.
The code I used seem to stop that on initial load of application.
Thanks

Tom Beck

I'm just not sure what the point was of posting a piece of jquery script on EE with no context. Going to styliststudioinc.com was not helpful because the script you posted is not part of that page. #Bar and #pic are not even part of that page. You gave no feedback on my comments. I'm just scratching my head on this one.

Sheritlw

ASKER

It is part of the redirecting.aspx.
Maybe you need to clear your cache.
I actually got this working before you even commented, but I had to go into surgery so I wasn't able to respond.

Thanks

Tom Beck

It is part of the redirecting.aspx

Posting that relevant context along with the question would have been helpful.

I actually got this working before you even commented

Congratulations, I wish I had known that before studying it.

Sheritlw

ASKER

I would never had posted the question if I new I was going to have to have surgery.
I am sorry for not being able to cancel it before you researched it.

Again, I am sorry... I didn't intentionally let this question slide...

Thanks for your help,

Sheritlw

ASKER

Found answer and posted it.