• Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 456
  • Last Modified:

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

0
Sheritlw
Asked:
Sheritlw
  • 6
  • 4
3 Solutions
 
dhawalsethCommented:
Hi,
Go to the .js file you are using which contains your jquery code.
look for the '.animate()' function, drill down through it. you will find the solution there.
-the line: $("#pic").animate({
            marginLeft: '80%'
        }, 0, function() { $(this).stop(true, true).fadeOut() });
        });
will help you locate the particular overload of the function.

Mark as answer if helped.
Enjoy!!.
0
 
SheritlwAuthor Commented:
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
0
 
Tom BeckCommented:
For what it's worth, here's my assessment of the situation.

The animation never has a chance to display fully because it's not part of Default.aspx. It attempts to display but is quickly displaced when Default.aspx begins to load. In the finished page, the animation script you posted does not appear anywhere. Neither does an element with the id="Bar" nor one with an id="pic".

Here's some evidence for you. You can see the RedirectTintBrush.png is being fetched and the RedirectBar.png that represents the painted bar. Then Default.aspx is loading and it's all over for the animation.
Tint Brush AnimationMaybe if you post your aspx markup and any relevant code we can determine what is happening to that animation and those two elements.
0
Ultimate Tool Kit for Technology Solution Provider

Broken down into practical pointers and step-by-step instructions, the IT Service Excellence Tool Kit delivers expert advice for technology solution providers. Get your free copy now.

 
SheritlwAuthor Commented:
I got it to work!

 $(document).ready(function() {

        $("#Bar").animate({
            width: "85%"
        }, { duration: 5000, queue: false }, function() {
            $("#pic").animate({
                marginLeft: '85%'
            },{queue: false});
        });
    });

Open in new window

0
 
Tom BeckCommented:
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.
0
 
SheritlwAuthor Commented:
??  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
0
 
Tom BeckCommented:
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.
0
 
SheritlwAuthor Commented:
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
0
 
Tom BeckCommented:
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.
0
 
SheritlwAuthor Commented:
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,
0
 
SheritlwAuthor Commented:
Found answer and posted it.
0
Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.

Join & Write a Comment

Featured Post

Ultimate Tool Kit for Technology Solution Provider

Broken down into practical pointers and step-by-step instructions, the IT Service Excellence Tool Kit delivers expert advice for technology solution providers. Get your free copy now.

  • 6
  • 4
Tackle projects and never again get stuck behind a technical roadblock.
Join Now