Solved

JQuery, Can't get small animation to work right.

Posted on 2012-04-01
6
364 Views
Last Modified: 2012-04-01
I have a small JQuery snippet where I want the Div,  #Bar to go to the end of the page.
The second animation is a picture and I want it to move with the bar and then disappear when it gets to the end.
It looks like a someone painting a straight line with a paint brush.
The straight line is the Div, #Bar, and the Brush is the #Pic.
It will run, but I can't get the brush to stop at the end, instead it bounces back to the beginning.
How do I get this to work?
$(document).ready(function() {
         $("#Bar").animate({
             width: "95%"
         }, 5000, function() {
             $("#pic").animate({
                 marginLeft: '+=0px'
             }, 5000);
         });
     });

Open in new window

0
Comment
Question by:Sheritlw
  • 4
  • 2
6 Comments
 
LVL 7

Expert Comment

by:designatedinitializer
ID: 37793609
maybe this is what you are looking for:
$(document).ready(function() {
         $("#Bar").animate({
             width: "95%"
         }, 5000, function() {
             $("#pic").animate({
                 marginLeft: '95%'
             }, 5000);
         });
     });

Open in new window

However, I can't know for sure because you haven't posted the CSS properties of both these elements.
0
 

Author Comment

by:Sheritlw
ID: 37793643
Sorry I didn't post the other parts.  I tried your suggestion, but it did the same thing.

Thanks for your help,

<div style="width:15px; display: block;" class="divbackcolorredirect" id="Bar">
    <span id="Span1" style="border:none; color:White;  font-size:1.2em; font-weight:bold; padding-left:8px;">
        Welcome to Stylist Studio... The application can the works the way independent contractors work!
    </span>
</div>
<div class="divbackcolorbrushredirect" id="pic">
    <img id="Img2" alt="Tint Brush" src="/images2020/RedirectTintBrush.png" height="150" width="164" enableviewstate="false" />
</div>

#CSS

 .divbackcolorredirect
{
   float:left;
   height:58px;
   width:80%;
   background-image:url("/images2020/RedirectBar.png");
   border-top-left-radius:10px; border-bottom-left-radius:10px; background-color:#4c094b;
   color:red;
   font-size:1.2em;
   text-align:left;
  Padding-left:1em;
   font-weight:bold;
   z-index:1000;
   background-repeat:repeat-x;
   display:block;
   
   }  
   
 .divbackcolorbrushredirect
{
   float:left;
   width:15%;
   margin:-5.5em 0 0 -1.5em;
   position:relative;
   z-index:1000;
   display:block;
   
  
   }  

Open in new window

0
 
LVL 7

Accepted Solution

by:
designatedinitializer earned 500 total points
ID: 37793721
this will do the trick:
$(document).ready(function() {
         $("#Bar").animate({
             width: "95%"
         }, 5000, function() {
             $("#pic").animate({
                 marginLeft: '95%'
             }, 0);
         });
     });

Open in new window


It's the same I posted before, BUT with 0 instead of 5000 in the duration...
It works!
0
Free Trending Threat Insights Every Day

Enhance your security with threat intelligence from the web. Get trending threat insights on hackers, exploits, and suspicious IP addresses delivered to your inbox with our free Cyber Daily.

 

Author Comment

by:Sheritlw
ID: 37793731
It doesn't work for me.  The brush still bounces back to where it started.

Thanks
0
 

Author Comment

by:Sheritlw
ID: 37793759
Sorry, my fault... It worked!
I had to change 95% to 85%.

Thanks for your help!
0
 

Author Closing Comment

by:Sheritlw
ID: 37793762
Thank you
0

Featured Post

Maximize Your Threat Intelligence Reporting

Reporting is one of the most important and least talked about aspects of a world-class threat intelligence program. Here’s how to do it right.

Join & Write a Comment

Introduction HyperText Transfer Protocol (http://www.ietf.org/rfc/rfc2616.txt) or "HTTP" is the underpinning of internet communication.  As a teacher of web development I have heard many questions, mostly from my younger students who have come to t…
Introduction Chart.js, used properly, can visually add a difference to your charting applications. It engages your visitors and allows them to interact with data they otherwise wouldn't be able to without expensive and complicated systems. For this…
The viewer will learn the basics of jQuery, including how to invoke it on a web page. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery.: (CODE)
The viewer will learn the basics of jQuery including how to code hide show and toggles. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery…

708 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

19 Experts available now in Live!

Get 1:1 Help Now