Register

If this is your first visit, please click the Sign Up now button to begin the process of creating your account so you can begin posting on our forums! The Sign Up process will only take up about a minute of two of your time.

Results 1 to 10 of 10
  1. #1
    Senior Member RDesignista's Avatar
    Join Date
    Feb 2012
    Location
    Coconut Tree City
    Posts
    822
    Member #
    30921
    Liked
    123 times
    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.

    Code:
    $("#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

  2.  

  3. #2
    Senior Member Webzarus's Avatar
    Join Date
    May 2011
    Location
    South Carolina Coast
    Posts
    3,322
    Member #
    27709
    Liked
    770 times
    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

  4. #3
    Senior Member RDesignista's Avatar
    Join Date
    Feb 2012
    Location
    Coconut Tree City
    Posts
    822
    Member #
    30921
    Liked
    123 times
    Thanks. I did not know that there was a difference in javascript. Thought it was like PHP.

    -R

  5. #4
    Senior Member Ronald Roe's Avatar
    Join Date
    Mar 2011
    Location
    Oklahoma City
    Posts
    3,141
    Member #
    27197
    Liked
    959 times
    Part of your performance issues may be the way you're selecting elements in your jQuery.

    Take this selector:
    Code:
    $("#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."
    Ron Roe
    Web Developer
    "If every app were designed using the same design template, oh wait...Bootstrap."

  6. #5
    Senior Member RDesignista's Avatar
    Join Date
    Feb 2012
    Location
    Coconut Tree City
    Posts
    822
    Member #
    30921
    Liked
    123 times
    Quote Originally Posted by Ronald Roe, post: 246156
    Part of your performance issues may be the way you're selecting elements in your jQuery.

    Take this selector:
    Code:
    $("#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

  7. #6
    WDF Staff smoseley's Avatar
    Join Date
    Mar 2003
    Location
    Boston, MA
    Posts
    9,729
    Member #
    819
    Liked
    205 times
    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.

  8. #7
    Senior Member RDesignista's Avatar
    Join Date
    Feb 2012
    Location
    Coconut Tree City
    Posts
    822
    Member #
    30921
    Liked
    123 times
    Quote Originally Posted by smoseley, post: 246229
    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

  9. #8
    Member
    Join Date
    Nov 2012
    Location
    Tampa. FL
    Posts
    59
    Member #
    33844
    Liked
    21 times
    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.
    Freelance Web Developer

  10. #9
    WDF Staff smoseley's Avatar
    Join Date
    Mar 2003
    Location
    Boston, MA
    Posts
    9,729
    Member #
    819
    Liked
    205 times
    Actually, I was wrong. A little look into the jQuery codebase reveals this line:

    Code:
    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.

  11. #10
    Member
    Join Date
    Nov 2012
    Location
    Tampa. FL
    Posts
    59
    Member #
    33844
    Liked
    21 times
    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.
    Freelance Web Developer


Remove Ads

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •  
All times are GMT -6. The time now is 03:05 PM.
Powered by vBulletin® Version 4.2.3
Copyright © 2019 vBulletin Solutions, Inc. All rights reserved.
vBulletin Skin By: PurevB.com