Solved

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

Posted on 2012-04-01
6
382 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
How Do You Stack Up Against Your Peers?

With today’s modern enterprise so dependent on digital infrastructures, the impact of major incidents has increased dramatically. Grab the report now to gain insight into how your organization ranks against your peers and learn best-in-class strategies to resolve incidents.

 

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

Active Directory Webinar

We all know we need to protect and secure our privileges, but where to start? Join Experts Exchange and ManageEngine on Tuesday, April 11, 2017 10:00 AM PDT to learn how to track and secure privileged users in Active Directory.

Question has a verified solution.

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

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 …
This article demonstrates how to create a simple responsive confirmation dialog with Ok and Cancel buttons using HTML, CSS, jQuery and Promises
The viewer will learn how to dynamically set the form action using jQuery.
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…

820 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