Solved

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

Posted on 2012-04-01
6
371 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
3 Use Cases for Connected Systems

Our Dev teams are like yours. They’re continually cranking out code for new features/bugs fixes, testing, deploying, testing some more, responding to production monitoring events and more. It’s complex. So, we thought you’d like to see what’s working for us.

 

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

Master Your Team's Linux and Cloud Stack

Come see why top tech companies like Mailchimp and Media Temple use Linux Academy to build their employee training programs.

Question has a verified solution.

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

A long time ago (May 2011), I have written an article showing you how to create a DLL using Visual Studio 2005 to be hosted in SQL Server 2005. That was valid at that time and it is still valid if you are still using these versions. You can still re…
Introduction Knockoutjs (Knockout) is a JavaScript framework (Model View ViewModel or MVVM framework).   The main ideology behind Knockout is to control from JavaScript how a page looks whilst creating an engaging user experience in the least …
The viewer will learn how to dynamically set the form action using jQuery.
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)

813 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

18 Experts available now in Live!

Get 1:1 Help Now