jQuery класс исчезает при размытии ввода/активно

Question

Я сделал вход с изображением в качестве фона. Когда вход активен, вход меняет изображение.

Я хочу, чтобы он оживлял/исчезал между этими состояниями.

Способ, которым он сейчас работает: Класс idleInput добавлен во входную нагрузку. Когда вход активен, активен активный класс. Как я могу оживить это?

<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> 

Заранее спасибо, и извините за мой плохой английский ... :-)

Answer 1

Вы должны взглянуть на jQuery.animate и метод switchclass.

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

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