Solved

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

Posted on 2012-04-01
6
369 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
DevOps Toolchain Recommendations

Read this Gartner Research Note and discover how your IT organization can automate and optimize DevOps processes using a toolchain architecture.

 

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

Is Your Active Directory as Secure as You Think?

More than 75% of all records are compromised because of the loss or theft of a privileged credential. Experts have been exploring Active Directory infrastructure to identify key threats and establish best practices for keeping data safe. Attend this month’s webinar to learn more.

Question has a verified solution.

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

Suggested Solutions

There are a couple ways to attach a JavaScript function to dynamically created elements. You can make a new script for each element as it’s created or you can use delegation. Delegation allows a single script that is added at page creation to mat…
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)

912 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

22 Experts available now in Live!

Get 1:1 Help Now