jQuery类在输入模糊/活动时淡化

时间:2010-10-22 12:25:25

标签: jquery css animation background-image fade

我输入了一个图像作为背景。当输入处于活动状态时,输入会更改图像。

我想让它在theese州之间动画/淡出。

现在的工作方式: 类idleInput被添加到输入onload。当输入处于活动状态时,将添加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>

提前谢谢你,对不起我的英语不好......: - )

1 个答案:

答案 0 :(得分:0)

你应该看看jQuery.animate和switchclass方法。

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

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