jQuery Animer Rembourrage à zéro

Question

Je l'extrait de code suivant qui permet de basculer le rembourrage en vol stationnaire (voir exemple here):

<div id="outer"><div id="inner"></div></div> 
<script> 
    $("#inner").mouseenter(function() { 
    $("#outer").animate({ 'padding' : '20px' }, "slow"); 
    }); 
    $("#inner").mouseleave(function() { 
    $("#outer").animate({ 'padding' : '0px' }, "slow"); 
    }); 
</script> 

L'objectif est d'avoir le rembourrage animer à la fois dedans et dehors, mais actuellement aucune animation apparaît pour animer. J'ai fait quelques tests, et si je change le pad padding à 10 pixels (à partir de 0 pixels), il lance une animation, mais commence à zéro et s'anime à l'extérieur. Je cours jQuery 1.4.3. Aucun moyen de réparer cela?

Answer 1

Certainement un bug d'animation en 1.4.3, pour l'instant, vous pouvez travailler autour en animant les propriétés individuelles comme celle-ci:

$("#inner").mouseleave(function() { 
    $("#outer").animate({ 
    'padding-top' : 0, 
    'padding-right' : 0, 
    'padding-bottom' : 0, 
    'padding-left' : 0, 
    }, "slow"); 
}); 

You can test it out here.

Answer 2

Cela ressemble à un bogue dans 1.4.3 (partie css réécrite). 1.4.2 fonctionne très bien:

http://www.jsfiddle.net/YjC6y/44/

je vais étudier davantage et mettre à jour ce post.

Answer 3

Une autre solution serait d'utiliser un cssHook. Brandon Aarons jquery-cssHooks viennent à l'esprit (dans ce cas, le padding crochet dans marginpadding.js)

You can test it here

Answer 4

Je viens de réaliser jquery ne réagit pas très bien à des traits d'union « - » au sein de l'animation, mais vous obtenez le même résultat en obtenant tour de la trait d'union et en capitalisant la première lettre après. Donc, pour vous aurez quelque chose comme ceci:

$("#inner").mouseleave(function() { 
     $("#outer").animate({ 
    paddingTop : 0, 
     paddingRight : 0, 
     paddingBottom : 0, 
     paddingLeft : 0, 
     borderLeftWidth: 0, 
     borderTopWidth: 0, 
     borderRightWidth: 0, 
     borderBottomWidth: 0, 

}, slow);