为什么jQuery背景动画不起作用？

时间：2022-05-02 02:28:55

I'm a beginner web designer, and though I would try my hand at JavaScript and jQuery. After looking around W3Schools for a bit, I tried to make a simple jQuery animation, but it doesn't seem to work.

我是一名初学网页设计师，虽然我会尝试使用JavaScript和jQuery。在浏览了W3Schools之后，我尝试制作一个简单的jQuery动画，但它似乎不起作用。

<html>
    <head>
        <script type="text/javascript" src="jQuery.js"></script>
        <script>
            $(document).ready(function(){
                $("#name").blur(funtion(){
                    if(value==null || value==""){
                        $("#name").animate({background:#D23E42}, "slow");
                    }
                });
            });
        </script>
        <style type="text/css">
        body
        {
            font-family: Arial;
        }

        #name
        {
            background:#6BAA64;
            color: #FFFFFF;
            border:2px none;
            padding:5px;
            -webkit-border-radius:8px 8px;
            -moz-border-radius:8px 8px;
            border-radius:8px 8px;
            text-align: center;
        }
        </style>
    </head>

    <body style="text-align: center;">
        Name:
        <br />
        <input id="name" type="text" value="Your Name" />
    </body>
</html>

I was just trying to setup a simple contact/registration form model, so when the name field was left empty, or wasn't changed, would turn red (on blur).

我只是想设置一个简单的联系/注册表单模型，所以当名称字段留空或未更改时，将变为红色（模糊）。

5 个解决方案

#1

6  

You got many mistakes in that code:

你在那段代码中犯了很多错误：

$("#name").blur(function() {
    if (!this.value) {
        $(this).css('background-color', '#D23E42');
    }
});​

Mistakes:

误区：

  • funtion => function
  • 功能=>功能
  • value => this.value.
  • value => this.value。
  • The value of an input can never be null, it can be only an empty string.
  • 输入的值永远不能为空，它只能是一个空字符串。
  • animate => css, and the reason is that you can't animate background-color changes without a plugin.
  • animate => css，原因是你不能在没有插件的情况下动画背景颜色变化。
  • the color needs to be a string #D23E42 => '#D23E42'
  • 颜色需要是一个字符串＃D23E42 =>'＃D23E42'
  • background => background-color.
  • background => background-color。
  • $("#name") => $(this)
  • $（“＃name”）=> $（this）

It might be a good idea to stop learning at w3school as it doesn't seem to pay off...

在w3school停止学习可能是一个好主意，因为它似乎没有得到回报......

#2

2  

Sorry but you can't animate background, unless you use jColor

抱歉，除非使用jColor，否则无法为背景设置动画

From the docs:

来自文档：

All animated properties should be animated to a single numeric value, except as noted below; most properties that are non-numeric cannot be animated using basic jQuery functionality (For example, width, height, or left can be animated but background-color cannot be, unless the jQuery.Color() plugin is used).

除非如下所述，否则应将所有动画属性设置为单个数值。大多数非数字属性无法使用基本jQuery功能进行动画处理（例如，宽度，高度或左边可以设置动画，但背景颜色不能，除非使用jQuery.Color（）插件）。

#3

1  

jQuery.animate cannot animate background colours, but only properties like width, height, left, top etc. To animate background colours, you'll have to use a plugin like https://github.com/jquery/jquery-color

jQuery.animate不能为背景颜色设置动画，但只能为宽度，高度，左边，顶部等属性设置动画。要为背景颜色设置动画，你必须使用像https：//github.com/jquery/jquery-color这样的插件

#4

1  

You have two mistakes:

你有两个错误：

  1. The color value is a string, so you need quotes around "#D23E42". Otherwise you're probably seeing a syntax error.
  2. 颜色值是一个字符串，因此您需要“＃D23E42”周围的引号。否则，您可能会看到语法错误。
  3. JQuery doesn't actually animate colors anyway. There's a plugin that claims to add this feature though I haven't tried it out:
  4. 无论如何，JQuery实际上并没有动画颜色。有一个插件声称添加此功能虽然我还没有尝试过：

http://www.bitstorm.org/jquery/color-animation/

http://www.bitstorm.org/jquery/color-animation/

#5

1  

jsBin demo

$("#name").focusout(function(){                  
  var value = $.trim($(this).val());                 
  if(value === ''){    
    $(this).animate({backgroundColor:'#D23E42'}, 500);
  }   
});
  • In this demo I used the jQuery UI library to achieve the background fade color.
  • 在这个演示中，我使用jQuery UI库来实现背景淡化颜色。
  • Use .focusout()
  • 使用.focusout（）
  • Use $.trim() to prevent empty spaces being accepted as valid input
  • 使用$ .trim（）可以防止空格被接受为有效输入
  • Always use === to compare values
  • 始终使用===来比较值

EDIT Hede is a demo without the UI
You surely need to redo the color if the user reenter some text:

编辑Hede是没有UI的演示如果用户重新输入一些文本，您肯定需要重做颜色：

$("#name").focusout(function(){                
  var value = $.trim($(this).val());                 
  if(value === ''){    
    $(this).css({background:'#D23E42'});
  }else{
    $(this).css({background:'#6BAA64'});
  }
});

Demo without the UI library

#1

6  

You got many mistakes in that code:

你在那段代码中犯了很多错误：

$("#name").blur(function() {
    if (!this.value) {
        $(this).css('background-color', '#D23E42');
    }
});​

Mistakes:

误区：

  • funtion => function
  • 功能=>功能
  • value => this.value.
  • value => this.value。
  • The value of an input can never be null, it can be only an empty string.
  • 输入的值永远不能为空，它只能是一个空字符串。
  • animate => css, and the reason is that you can't animate background-color changes without a plugin.
  • animate => css，原因是你不能在没有插件的情况下动画背景颜色变化。
  • the color needs to be a string #D23E42 => '#D23E42'
  • 颜色需要是一个字符串＃D23E42 =>'＃D23E42'
  • background => background-color.
  • background => background-color。
  • $("#name") => $(this)
  • $（“＃name”）=> $（this）

It might be a good idea to stop learning at w3school as it doesn't seem to pay off...

在w3school停止学习可能是一个好主意，因为它似乎没有得到回报......

#2

2  

Sorry but you can't animate background, unless you use jColor

抱歉，除非使用jColor，否则无法为背景设置动画

From the docs:

来自文档：

All animated properties should be animated to a single numeric value, except as noted below; most properties that are non-numeric cannot be animated using basic jQuery functionality (For example, width, height, or left can be animated but background-color cannot be, unless the jQuery.Color() plugin is used).

除非如下所述，否则应将所有动画属性设置为单个数值。大多数非数字属性无法使用基本jQuery功能进行动画处理（例如，宽度，高度或左边可以设置动画，但背景颜色不能，除非使用jQuery.Color（）插件）。

#3

1  

jQuery.animate cannot animate background colours, but only properties like width, height, left, top etc. To animate background colours, you'll have to use a plugin like https://github.com/jquery/jquery-color

jQuery.animate不能为背景颜色设置动画，但只能为宽度，高度，左边，顶部等属性设置动画。要为背景颜色设置动画，你必须使用像https：//github.com/jquery/jquery-color这样的插件

#4

1  

You have two mistakes:

你有两个错误：

  1. The color value is a string, so you need quotes around "#D23E42". Otherwise you're probably seeing a syntax error.
  2. 颜色值是一个字符串，因此您需要“＃D23E42”周围的引号。否则，您可能会看到语法错误。
  3. JQuery doesn't actually animate colors anyway. There's a plugin that claims to add this feature though I haven't tried it out:
  4. 无论如何，JQuery实际上并没有动画颜色。有一个插件声称添加此功能虽然我还没有尝试过：

http://www.bitstorm.org/jquery/color-animation/

http://www.bitstorm.org/jquery/color-animation/

#5

1  

jsBin demo

$("#name").focusout(function(){                  
  var value = $.trim($(this).val());                 
  if(value === ''){    
    $(this).animate({backgroundColor:'#D23E42'}, 500);
  }   
});
  • In this demo I used the jQuery UI library to achieve the background fade color.
  • 在这个演示中，我使用jQuery UI库来实现背景淡化颜色。
  • Use .focusout()
  • 使用.focusout（）
  • Use $.trim() to prevent empty spaces being accepted as valid input
  • 使用$ .trim（）可以防止空格被接受为有效输入
  • Always use === to compare values
  • 始终使用===来比较值

EDIT Hede is a demo without the UI
You surely need to redo the color if the user reenter some text:

编辑Hede是没有UI的演示如果用户重新输入一些文本，您肯定需要重做颜色：

$("#name").focusout(function(){                
  var value = $.trim($(this).val());                 
  if(value === ''){    
    $(this).css({background:'#D23E42'});
  }else{
    $(this).css({background:'#6BAA64'});
  }
});

Demo without the UI library

标签：

相关文章