Entrée slideUp/slideDown issue

Question

On dirait que jQuery supprime la valeur d'un champ d'entrée qui a été glissé puis abaissé. Pas tout à fait sûr si c'est l'espace réservé qui le fait mais le slideUp/Down intégré semble bug le champ d'entrée.

Voici un exemple: http://jsfiddle.net/k3Bc2/

$(document).ready(function() { 
    $('#slideUp').click(function() { 
     $('input[type="text"]').slideUp(1000); 
    }); 

    $('#slideDown').click(function() { 
     $('input[type="text"]').slideDown(1000); 
    }); 
}); 

Si vous entrez une valeur dans le champ de saisie et cliquez sur le bouton slideUp et attendre jusqu'à ce qu'il soit coulissé et puis cliquez sur le slideDown vous verrez la valeur du champ d'entrée est manquant. Est-ce que quelqu'un sait une solution de contournement pour obtenir un slideUp/slideDown travaillant sur l'exemple lié?
Utiliser Google Chrome si cela donne une idée de pourquoi.

Answer 1

Une erreur se produit lorsque la hauteur de l'entrée est 0. Vous devez changer de méthode. Utilisez la position de css avec la méthode Animer de masquage:

Here is demo link. You'll inspect there will be no bug with this method.

jQuery:

$(document).ready(function() { 
    $('#slideUp').click(function() { 
     $('input[type="text"]').stop().animate({'top':'200px'},400); 
    }); 

    $('#slideDown').click(function() { 
     $('input[type="text"]').stop().animate({'top':'0px'},400); 
    }); 
});​ 

html:

<div id="mask"> 
    <input id="motion" type="text" value="" placeholder="Enter some text.." /> 
</div> 
<input type="button" value="slideUp" id="slideUp" /> 
<input type="button" value="slideDown" id="slideDown" />​ 

css:

#mask { position:relative; 160px; height:25px; overflow:hidden; top:0; left:0; } 
#motion { position:absolute; top:0; left:0; } 
input { position:relative; } ​ 

Answer 2

Il semble comme un bug i n chrome (pas jQuery). Cela fonctionne très bien en ff.

C'est quelque chose en rapport avec font-size, je suppose. Chrome ne perd pas font-size mais si vous définissez à nouveau, cela fonctionne.

$(document).ready(function() { 
    $('#slideUp').click(function() { 
     $('input[type="text"]').slideUp(1000); 
    }); 

    $('#slideDown').click(function() { 
     $('input[type="text"]').slideDown(1000,function(){ 
      $(this).css('font-size',$(this).css('font-size'));     
     }); 
    }); 
});​ 

Demo

EDIT:

Je vois que ci-dessus bidouille fonctionne pour une seule fois. Si vous faites glisser vers le haut/bas, cela échoue.

Voici un meilleur hack.

.text{ 
    font-size:13px; 
}​ 

$(document).ready(function() { 
    $('#slideUp').click(function() { 
     $('input[type="text"]').slideUp(1000,function(){ 
       $(this).removeClass('text');   
     }); 
    }); 

    $('#slideDown').click(function() { 
     $('input[type="text"]').slideDown(1000,function(){  
      $(this).addClass('text');  
     }); 
    }); 
});​ 

Demo