jQuery類淡入淡出輸入模糊/活動

Question

我用圖像作爲背景進行了輸入。當輸入激活時，輸入改變圖像。

我希望它在這些狀態之間動畫/淡入淡出。

它現在的工作方式： 類的idleInput被添加到輸入加載。當輸入處於活動狀態時，將添加activeInput類。我該如何製作動畫？

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