?
Solved

Problem with small jQuery animation

Posted on 2012-04-02
12
Medium Priority
?
452 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
  • 6
  • 4
11 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
Independent Software Vendors: We Want Your Opinion

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

 

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

Upgrade your Question Security!

Your question, your audience. Choose who sees your identity—and your question—with question security.

Question has a verified solution.

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

Why do we like using grid based layouts in website design? Let's look at the live examples of websites and compare them to grid based WordPress themes.
The article shows the basic steps of integrating an HTML theme template into an ASP.NET MVC project
In this tutorial viewers will learn how to style rounded corners for elements in CSS using the border-radius property Begin with a normal styled element such as a div: To style all four corners of the div to be the same degree of roundness, use the …
The viewer will learn how to count occurrences of each item in an array.
Suggested Courses

615 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