Classe jQuery fondu sur le flou d'entrée/actif

Question

J'ai entré une image avec un arrière-plan. Lorsque l'entrée est active, l'entrée change d'image.

Je veux qu'il anime/disparaisse entre ces états.

Fonctionnement actuel: La classe idleInput est ajoutée à l'onload. Lorsque l'entrée est active, la classe activeInput est ajoutée à la place. Comment puis-je animer cela?

<script type="text/javascript"> 
$(document).ready(function() { 
    $('input[type="text"]').addClass("idleField"); 
    $('input[type="text"]').focus(function() { 
    $(this).removeClass("idleField").addClass("focusField"); 
    if (this.value == this.defaultValue){ 
    this.value = ''; 
    } 
    if(this.value != this.defaultValue){ 
    this.select(); 
    } 
    }); 
    $('input[type="text"]').blur(function() { 
    $(this).removeClass("focusField").addClass("idleField"); 
    if ($.trim(this.value) == ''){ 
    this.value = (this.defaultValue ? this.defaultValue : ''); 
    } 
    }); 
}); 
</script> 

Merci à l'avance, et désolé pour mon mauvais anglais ... :-)

Answer 1

Vous devriez jeter un oeil à jQuery.animate et la méthode switchclass.

$("#button").click(function(){ 
      $(".newClass").switchClass('newClass', 'anotherNewClass', 1000); 
      $(".anotherNewClass").switchClass('anotherNewClass', 'newClass', 1000); 
      return false; 
     }); 

http://jqueryui.com/docs/switchClass/