Solved

Problem with small jQuery animation

Posted on 2012-04-02
12
437 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
12 Comments
 
LVL 7

Assisted Solution

by:dhawalseth
dhawalseth earned 250 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 250 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
 

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
Better Security Awareness With Threat Intelligence

See how one of the leading financial services organizations uses Recorded Future as part of a holistic threat intelligence program to promote security awareness and proactively and efficiently identify threats.

 

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

IT, Stop Being Called Into Every Meeting

Highfive is so simple that setting up every meeting room takes just minutes and every employee will be able to start or join a call from any room with ease. Never be called into a meeting just to get it started again. This is how video conferencing should work!

Join & Write a Comment

Suggested Solutions

Title # Comments Views Activity
dynamic menu in asp.net c# 11 29
What does this javascript do? 7 24
HTML CSS 7 19
Angular - where do I need to put this code? 3 11
SASS allows you to treat your CSS code in a more OOP way. Let's have a look on how you can structure your code in order for it to be easily maintained and reused.
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.
In this tutorial viewers will learn how to style transparent/translucent elements using alpha transparency in CSS Start with a normal styled element, such as a div.: Define its "background-color" property as "rgba (255, 255, 255, .5): The numbers in…
The viewer will receive an overview of the basics of CSS showing inline styles. In the head tags set up your style tags: (CODE) Reference the nav tag and set your properties.: (CODE) Set the reference for the UL element and styles for it to ensu…

757 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

Need Help in Real-Time?

Connect with top rated Experts

20 Experts available now in Live!

Get 1:1 Help Now