Solved

Problem with small jQuery animation

Posted on 2012-04-02
12
446 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 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
Industry Leaders: 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

Free Tool: Port Scanner

Check which ports are open to the outside world. Helps make sure that your firewall rules are working as intended.

One of a set of tools we are providing to everyone as a way of saying thank you for being a part of the community.

Question has a verified solution.

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

Suggested Solutions

Title # Comments Views Activity
Jquery HTML() with ajax... replacing content 2 30
Record locking on classic ASP 3 40
Top Aligning Inner Divs 5 23
Calculating percentage 2 30
International Data Corporation (IDC) prognosticates that before the current the year gets over disbursing on IT framework products to be sent in cloud environs will be $37.1B.
Today, the web development industry is booming, and many people consider it to be their vocation. The question you may be asking yourself is – how do I become a web developer?
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…
The viewer will the learn the benefit of plain text editors and code an HTML5 based template for use in further tutorials.

749 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