?
Solved

Problem with small jQuery animation

Posted on 2012-04-02
12
Medium Priority
?
450 Views
Last Modified: 2012-04-19
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
Comment
Question by:Sheritlw
[X]
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
  • 6
  • 4
12 Comments
 
LVL 7

Assisted Solution

by:dhawalseth
dhawalseth earned 1000 total points
ID: 37799915
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
 

Author Comment

by:Sheritlw
ID: 37802639
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
 
LVL 38

Assisted Solution

by:Tom Beck
Tom Beck earned 1000 total points
ID: 37820314
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
Give Your Engineering Team a Productivity Boost

Learn why container technology is so powerful and how it can provide your team with productivity gains and other benefits.

 

Accepted Solution

by:
Sheritlw earned 0 total points
ID: 37846455
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
 
LVL 38

Expert Comment

by:Tom Beck
ID: 37846566
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
 

Author Comment

by:Sheritlw
ID: 37846583
??  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
 
LVL 38

Expert Comment

by:Tom Beck
ID: 37846607
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
 

Author Comment

by:Sheritlw
ID: 37846625
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
 
LVL 38

Expert Comment

by:Tom Beck
ID: 37846718
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
 

Author Comment

by:Sheritlw
ID: 37846736
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
 

Author Closing Comment

by:Sheritlw
ID: 37864755
Found answer and posted it.
0

Featured Post

Automating Terraform w Jenkins & AWS CodeCommit

How to configure Jenkins and CodeCommit to allow users to easily create and destroy infrastructure using Terraform code.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

CSS is a visual language used to classify objects and define rules about how they should be displayed. CSS skills aren’t restricted to developers anymore, there is a big benefit to having a basic understanding of the language, regardless of your occ…
In this blog, we’ll look at how improvements to Percona XtraDB Cluster improved IST performance.
In this tutorial viewers will learn how to style elements, such a divs, with a "drop shadow" effect using the CSS box-shadow property Start with a normal styled element, such as a div.: In the element's style, type the box shadow property: "box-shad…
Video by: Mark
This lesson goes over how to construct ordered and unordered lists and how to create hyperlinks.
Suggested Courses

765 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question