Quotes around values cause animate() to slow?

[RDesignista]

Hi,

I was copying a website's animation because I really liked the perky animation. Well, I copied it to a tee, but my animation was not fast at all, despite me setting the speed to '100' (ms). Then I tried removing single quotes from the x-y values and that changed it.

Am I missing something here? How can quotes around values possibly make any difference??

One note though: the objects I am animating are position:absolute.

$("#nav-wrap #navigation #navigation-wrap #top-logo").hover(function() {
    $(this).stop(true).animate({left: '+53'}, '50', function() {
            $(this).stop(true).animate({left: '+57'}, '50', function() {
                $(this).stop(true).animate({left: '+55'}, '50');
            });
        });
    },
    function() {
//        $('#nav-wrap #navigation #navigation-wrap #top-logo').stop().animate({top:'+55'}, '100');
    });

-R

[Webzarus]

JavaScript is very particular about single quotes, they are like a delimiter in a CSV data file, they are very specific. If you removed a set of single quotes from a JavaScript function, I'm surprised it actually did work, but suspect, it was combining what it couldn't read correctly from the JS file from memory of cache...

Did you clear your browser cache before trying to reload the page after you changed the code ?

In your posted code... Is that first line part of the CSS of JavaScript function ? I can't tell on my phone. If its part of a function, you may want to replace the double quotes with singles...

Just a thought

[RDesignista]

Thanks. I did not know that there was a difference in javascript. Thought it was like PHP.

-R

[Ronald Roe]

Part of your performance issues may be the way you're selecting elements in your jQuery.

Take this selector:

$("#nav-wrap #navigation #navigation-wrap #top-logo")

In CSS, this would be slow, then consider that jQuery has to run everything through some JS to perform the same function that CSS does natively.

Why is it slow? Here's what's happening:

Browser: "Looking for #top-logo - Ok, found it!"

Your Code: "Screw you, keep looking."

Browser: "Looking for #top-logo within #navigation-wrap - Ok, found it...again."

Your Code: "Screw you, keep looking."

Browser: "Looking for #top-logo within #navigation-wrap, within #navigation - Ok, found it...again."

Your Code: "Screw you, keep looking."

Browser: "Looking for #top-logo within #navigation-wrap, within #navigation, within #nav-wrap - Ok, found it...again."

[RDesignista]

Part of your performance issues may be the way you're selecting elements in your jQuery.

Take this selector:

$("#nav-wrap #navigation #navigation-wrap #top-logo")

In CSS, this would be slow, then consider that jQuery has to run everything through some JS to perform the same function that CSS does natively.

Why is it slow? Here's what's happening:

Browser: "Looking for #top-logo - Ok, found it!"

Your Code: "Screw you, keep looking."

Browser: "Looking for #top-logo within #navigation-wrap - Ok, found it...again."

Your Code: "Screw you, keep looking."

Browser: "Looking for #top-logo within #navigation-wrap, within #navigation - Ok, found it...again."

Your Code: "Screw you, keep looking."

Browser: "Looking for #top-logo within #navigation-wrap, within #navigation, within #nav-wrap - Ok, found it...again."

I read somewhere that you can increase jquery performance by being very specific with selectors for the DOM? I don't actually know what that means, but to me, it meant that narrowing down the path with which jquery will be targeting is a good idea. Of course I don't do my CSS like this, but this is just something I read for jquery.

-R

[smoseley]

Math operations on strings will always be slower than the same operations on integers. There's the extra overhead of casting the string to an int before doing any operations, and jQuery is probably casting it back to a string afterwards, for each iteration of the animation.

[RDesignista]

Math operations on strings will always be slower than the same operations on integers. There's the extra overhead of casting the string to an int before doing any operations, and jQuery is probably casting it back to a string afterwards, for each iteration of the animation.

Oh God. My brain had to operate at 4x rate to comprehend your message. I've always been much poorer at JS than HTML/CSS. Even back in high school when I learned HTML with ease by teaching myself, I always struggled with javascript.

Anyway, I guess I will alter my code. I take it the best practice is to just list one container and one element?

-R

[ekim941]

What smoseley is saying is that the quotes mean that it's a string literal (text) that you are passing. You are telling the script "one hundred" which it has to convert to the number 100 every time the animation plays. I know you're not actually saying "one hundred" but the machine interprets '100' as a word that it has to convert to a number.

[smoseley]

Actually, I was wrong. A little look into the jQuery codebase reveals this line:

opt.duration = jQuery.fx.off
               ? 0
               : typeof opt.duration === "number"
                   ? opt.duration
                   : opt.duration in jQuery.fx.speeds
                       ? jQuery.fx.speeds[opt.duration]
                       : jQuery.fx.speeds._default;

So what this double-nested ternary is saying is that if your duration is not set to a number or one of the predefined strings, it'll use jQuery.fx.speeds._default (400) as your duration value.

Thus, even if you specify a duration of '50', it'll animate with a duration of 400 milliseconds, since you provided the STRING value instead of the NUMERIC value.

[ekim941]

That's a bigger difference than the time it would take to cast a string to an integer. I was wondering how the OP noticed the change in speed. Thanks for clearing that up.