1

Referring to this fiddle. This animation is quite smooth on Chrome and IE (v9), however it is very choppy on Firefox. The whole idea is to animate the border without moving the div itself (referring back to this question). Question is, any possible way to achieve the same animation but in a smoother fashion (like that in Chrome/IE) in Firefox?

This is the case even if you animate just one side of the div, so it's not because we are trying to animate every side at once. If we look at this fiddle in Firefox, it seems that the margins being animated is not too smooth, which seems to be the problem.

Any workout is appreciated.

Community
  • 1
  • 1
vinceh
  • 3,490
  • 1
  • 21
  • 24
  • 1
    I don't think you need the `isIn` variable. MouseEnter and Mouse Leave only happen once. just put `.stop()` before the `.animate(` but that won't fix your issue sorry. – James Khoury Jul 01 '11 at 01:44
  • Which version of Firefox? It looks fairly smooth to me on Firefox 5 – Yi Jiang Jul 01 '11 at 01:58
  • I'm not familiar with the jQuery but i guess every style will be added via the CSSStyleDeclaration in a way like this: `var style = elem.style; style.marginTop = '10px'; style.marginLeft='10px'; ...`. The reason it looks choppy is that every change in the DOM activates a (partitial) reflow (reprint). This meens that after `style.marginTop = '10px';` will be the _first_ reflow, the next after `style.marginLeft='10px';` and so on. You have to put all styles at once on the element e.g. `elem.setAttribute('style', 'margin-top: 10px; margin-left: 10px;...');`. But this won't work in older IEs. – Saxoier Jul 01 '11 at 02:12
  • @Yi Jiang, Firefox 5 (the current version). If you look at the fiddle, it seems to almost vibrate a little. And it's even more obviously at [this link](http://whitespace.heroku.com) – vinceh Jul 01 '11 at 07:24

1 Answers1

0

I think the main issue is that you've specified so many properties and the animation function may think it has 8 different things to animate at once rather than just the two properties that it can be expressed as. For example, you can specify it this way, combining the 8 parameters into 2. I'm also not sure about the negative margins:

$("#thumbdiv").bind({
            mouseenter: function(){
                $(this).animate({
                    'border-width': "35px",
                    'margin': "10px"},
                    200, 'linear');
            },
            mouseleave: function(){
                $(this).animate({
                    'border-width': "20px",
                     'margin': "0px"},
                    200, 'linear');
            }
        });
jfriend00
  • 683,504
  • 96
  • 985
  • 979
  • You can't animate shorthands in JQuery right now, that's why there is 8 different attributes being animated – vinceh Jul 01 '11 at 07:06
  • Are you sure that you can't use border-width and margin with only one value? While they can take more than one value, they can work with only one value which should be animateable that way. – jfriend00 Jul 01 '11 at 16:02
  • In YUI, we can use any style with animation that takes a single parameter. This is because the YUI library just takes whatever single value you give it and animates that single value. It doesn't matter whether it is or whether the same style attribute could be used with more than one parameter. As long as we're using it with only one parameter, it works. I can see no reason in the jQuery code why it wouldn't be the same. – jfriend00 Jul 01 '11 at 16:09
  • If you look [here] (http://api.jquery.com/animate/) it tells you at some point `Shorthand CSS properties (e.g. margin, background, border) are not supported. For example, if you want to retrieve the rendered margin, use: $(elem).css('marginTop') and $(elem).css('marginRight'), and so on.` – vinceh Jul 04 '11 at 16:32
  • I'm pretty sure that jQuery works with the a shorthand name like margin if you only use one value with it rather than 2, 3 or 4 values. For example: "margin: 10px". That's because this is just any old CSS property and jQuery doesn't special case these properties. It just animates whatever number you give them which should work fine. There are some properties that are handled in a special way, but margin doesn't appear to be one of those in looking at the jquery source. You can see it in action here (e.g. it works): http://jsfiddle.net/jfriend00/Uwum2/ – jfriend00 Jul 05 '11 at 00:55
  • Sure, I can agree with that, but even then I don't know if that's true. The main point is however, that we WANT to animate many things at once, what's the point of allowing shorthand notation if we can only animate that one thing. Also, even if you just specify one shorthand, JQuery still converts that into 4 commands. If you look at the fiddle you gave, it animates each side separately, so I'm 100% sure that isn't the "reason" as to why I'm getting that behaviour ONLY on Firefox. – vinceh Jul 09 '11 at 10:06