Comment faire pour basculer en douceur la largeur de la bordure avec jquery?

Question

Je suis en train de passer en douceur la frontière de la largeur d'une durée comprise entre 0 et 5. Ce est le code que je l'ai essayé, développer dans Firefox

function anim() 
    { 
    this.sw=!this.sw; 
    if(this.sw) 
    { 
     //lower 
     $('.cell_action').animate(
     { 
     'border-width':'0px', 
     'margin':0 
     }, 
     600 
    ); 
    } 
    else 
    { 
     //raise 
     $('.cell_action').animate(
     { 
     'border-width':'5px', 
     'margin':-5 
     }, 
     600 
    ); 
    } 
    } 

Lorsque je tente d'aller à 5px, il semble pour fonctionner, mais lorsque je réexécute la fonction pour revenir à 0, la bordure est immédiatement définie sur 0 et seule la marge s'anime.

Answer 1

semble être un bug ... Je vais avoir le même problème, mais on a remarqué ce qui suit:

• FireFox (3): Pas d'animation à 0
• Chrome: Pas d'animation à 0
• Safari (winXP): Pas d'animation à 0
• Opera (10): Pas de problème. Anime bien
• IE (8): Aucun problème. Bien anime

Aller à étudier plus ...

- EDIT -

trouvé la réponse sur bugs.jquey.com: ticket 7085

La propriété borderWidth est une propriété raccourcie et renvoie une chaîne qui est une série de nombres séparés par des espaces. La méthode .animate() est uniquement documentée pour animer les propriétés numériques, telles que borderLeftWidth.

Je fixe mon problème en animant à 0px comme ceci:

$this.animate({ 
    borderLeftWidth: "0px", 
    borderTopWidth: "0px", 
    borderRightWidth: "0px", 
    borderBottomWidth: "0px" 
}, 200);