animation slows down after resume

Question

0.00/5 (No votes)

See more:

Posted 29-Jul-12 23:07pm

firstfox

Updated 30-Jul-12 20:52pm

v3

Add a Solution

Comments

bbirajdar 30-Jul-12 8:11am

"nothing happens,it is still stopping." in not a technical explanation of a problem..

Sergey Alexandrovich Kryukov 30-Jul-12 12:53pm

Nevertheless, I provided an answer, as this code does not look right; please see.
--SA

2 solutions

Add a Solution

Add your solution here

Treat my content as plain text, not as HTML

Preview 0

…

Existing Members

Sign in to your account

...or Join us

Download, Vote, Comment, Publish.

Your Email
Password
Forgot your password?

Your Email
This email is in use. Do you need your password?
Optional Password

I have read and agree to the Terms of Service and Privacy Policy
Please subscribe me to the CodeProject newsletters

When answering a question please:

Read the question carefully.
Understand that English isn't everyone's first language so be lenient of bad spelling and grammar.
If a question is poorly phrased then either ask for clarification, ignore it, or edit the question and fix the problem. Insults are not welcome.
Don't tell someone to read the manual. Chances are they have and don't get it. Provide an answer or move on to the next question.

Let's work to help developers, not make them feel stupid.

This content, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)

firstfox · Answer 1 · 2012-07-31T02:31:00

C#

#share{
 position:absolute;

}

C#

var resume = false;

$(document).ready(function(){
    swing();
    $('#share').bind({
        hover: function () {
            $(this).stop();
        },
        mouseleave: function () {
           // var v = parseInt($("#share").css('right'));

            if (resume){
                var v = parseInt($("#share").css('right'));
                document.getElementById('<%=Label1.ClientID%>').innerHTML = "right of image    " + v;
                swing(v);}
            else {
                var v = parseInt($("#share").position().left) - 300;
                document.getElementById('<%=Label2.ClientID%>').innerHTML = "left of image    " + v;
                swingBack(v);}
        }
    });
});



function swing(v){
    var total = 800;
    var disremain = v ? 800 - Math.abs(v) : 800;
    document.getElementById('<%=Label3.ClientID%>').innerHTML = "disremainin go  "+disremain;
  $('#share').animate({
      right: '+=' + disremain + 'px'
  }, 4000*(disremain)/total, function(){
      resume = false;
      swingBack();

  });
}

function swingBack(v) {
    var total = 800;
    var disremain = v ? 800 - Math.abs(v) : 800;
    document.getElementById('<%=Label4.ClientID%>').innerHTML = "disremainin back    " + disremain;
    $('#share').animate({
        right: '0px'
    }, 4000 * (disremain) / total, function () {
    resume = true;
        swing();
    });
}

so i ended up using the above code,which works as i want in IE,firefox and also chrome.
hope this helps,if anyone needs it. :)

Sergey Alexandrovich Kryukov · Answer 2 · 2012-07-30T06:49:00

I cannot see proper structure of the code; in particular, setting the event handlers. Besides, you can setup two handlers by the .hover method — both "mouse in" and "mouse out":

C#

$(document).ready(function () {
    //...
    hoverElement = $(#share);
    $(hoverElement).hover(
        function () {
            // mouse in handler
        }, 
        function () {
            // mouse out handler
        }
    );  
});

Please see:
http://api.jquery.com/hover/[^].

Can you see the difference? The .hover handlers are added in the handler of document.ready, which provides right order of execution.

Besides, you can use a JavaScript debugger to check up two things: 1) if the handler is added, 2) if the handler is triggered.

—SA

animation slows down after resume

2 solutions

Solution 2

Solution 1

Add your solution here

Preview 0