问答博客资讯标签用户活动
logo极客观点logo项目管理logoHarmonyOS
开发者社区
javascript
前端
python
node.js
react
vue.js
php
laravel
go
人工智能
mysql
linux
ios
java
android
css
typescript
spring
程序员
logoONES 研发管理logo思否企业问答logo安谋科技 XPU

jquery点击按钮没有反应

头像
hectora
    481812
    头像
    fenbox
    6.8k237979

    代码如下，点击按钮没有任何效果

    <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <script src="https://cdn.bootcss.com/jquery/3.2.1/jquery.js"></script>
    <style>
        #cbox{
              background-color:green;
              color:red;
              border:5;
              width:300px;
              height:200px;
              positon:relative;
            }
    </style>
    <title>Document</title>
</head>
<body>
    <h1>Jquery 学习</h1>
    <button id='btn'>点击</button>
    
    <div id='cbox'>变化的Box</div>
    <script>
        jQuery(document).ready(function($){
            $('#btn').click(function(event){
                $('#cbox').animate({
                    left:300,
                    color:gray,
                    width:'400px'
                });
            });
        });

    
    </script>
</body>
</html>
    javascript
    阅读 6.3k
    5 个回答
    得票最新
    头像
    stardew
      6.1k41633
      ✓ 已被采纳

      animate是不会改变颜色的，所以这个gray是没有意义的，另外，就算你要写color，gray也应该加上引号，不然就成了一个未定义的变量了。

      头像
      穗乃果
        8.9k41937

        color:'gray'

        头像
        hsfzxjy
          22k51941

          参数列表里的 $ 去掉

          头像
          狼宝宝
            1
            新手上路，请多包涵

            function中不该有$。
            animate没有color标签，但是有透明度变换的opacity的标签。
            还有标签对应的值应有单引号''。

            头像
            故事说给风听
              62
              头像
              fenbox
              6.8k237979
              <!DOCTYPE html>
<html lang="en">
<head>

<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<script src="https://cdn.bootcss.com/jquery/3.2.1/jquery.js"></script>
<style>
    #cbox{
          background-color:green;
          color:red;
          width:300px;
          height:200px;
          position:relative;
        }
</style>
<title>Document</title>
</head><body>

<h1>Jquery 学习</h1>
<button id='btn'>点击</button>

<div id='cbox'>变化的Box</div>
<script>
    jQuery(document).ready(function($){
        $('#btn').click(function(event){
            $('#cbox').animate({
                left:300,
                color:"yellow",
                width:'400px'
            });
        });
    });


</script>


<script>
  /**!
 * @preserve Color animation 1.6.0
 * http://www.bitstorm.org/jquery/color-animation/
 * Copyright 2011, 2013 Edwin Martin
 * Released under the MIT and GPL licenses.
 */

(function($) {
  /**
   * Check whether the browser supports RGBA color mode.
   *
   * Author Mehdi Kabab <http://pioupioum.fr>
   * @return {boolean} True if the browser support RGBA. False otherwise.
   */
  function isRGBACapable() {
    var $script = $('script:first'),
        color = $script.css('color'),
        result = false;
    if (/^rgba/.test(color)) {
      result = true;
    } else {
      try {
        result = ( color != $script.css('color', 'rgba(0, 0, 0, 0.5)').css('color') );
        $script.css('color', color);
      } catch (e) {
      }
    }

    return result;
  }

  $.extend(true, $, {
    support: {
      'rgba': isRGBACapable()
    }
  });

  var properties = ['color', 'backgroundColor', 'borderBottomColor', 'borderLeftColor', 'borderRightColor', 'borderTopColor', 'outlineColor'];
  $.each(properties, function(i, property) {
    $.Tween.propHooks[ property ] = {
      get: function(tween) {
        return $(tween.elem).css(property);
      },
      set: function(tween) {
        var style = tween.elem.style;
        var p_begin = parseColor($(tween.elem).css(property));
        var p_end = parseColor(tween.end);
        tween.run = function(progress) {
          style[property] = calculateColor(p_begin, p_end, progress);
        }
      }
    }
  });

  // borderColor doesn't fit in standard fx.step above.
  $.Tween.propHooks.borderColor = {
    set: function(tween) {
      var style = tween.elem.style;
      var p_begin = [];
      var borders = properties.slice(2, 6); // All four border properties
      $.each(borders, function(i, property) {
        p_begin[property] = parseColor($(tween.elem).css(property));
      });
      var p_end = parseColor(tween.end);
      tween.run = function(progress) {
        $.each(borders, function(i, property) {
          style[property] = calculateColor(p_begin[property], p_end, progress);
        });
      }
    }
  }

  // Calculate an in-between color. Returns "#aabbcc"-like string.
  function calculateColor(begin, end, pos) {
    var color = 'rgb' + ($.support['rgba'] ? 'a' : '') + '('
        + parseInt((begin[0] + pos * (end[0] - begin[0])), 10) + ','
        + parseInt((begin[1] + pos * (end[1] - begin[1])), 10) + ','
        + parseInt((begin[2] + pos * (end[2] - begin[2])), 10);
    if ($.support['rgba']) {
      color += ',' + (begin && end ? parseFloat(begin[3] + pos * (end[3] - begin[3])) : 1);
    }
    color += ')';
    return color;
  }

  // Parse an CSS-syntax color. Outputs an array [r, g, b]
  function parseColor(color) {
    var match, quadruplet;

    // Match #aabbcc
    if (match = /#([0-9a-fA-F]{2})([0-9a-fA-F]{2})([0-9a-fA-F]{2})/.exec(color)) {
      quadruplet = [parseInt(match[1], 16), parseInt(match[2], 16), parseInt(match[3], 16), 1];

      // Match #abc
    } else if (match = /#([0-9a-fA-F])([0-9a-fA-F])([0-9a-fA-F])/.exec(color)) {
      quadruplet = [parseInt(match[1], 16) * 17, parseInt(match[2], 16) * 17, parseInt(match[3], 16) * 17, 1];

      // Match rgb(n, n, n)
    } else if (match = /rgb\(\s*([0-9]{1,3})\s*,\s*([0-9]{1,3})\s*,\s*([0-9]{1,3})\s*\)/.exec(color)) {
      quadruplet = [parseInt(match[1]), parseInt(match[2]), parseInt(match[3]), 1];

    } else if (match = /rgba\(\s*([0-9]{1,3})\s*,\s*([0-9]{1,3})\s*,\s*([0-9]{1,3})\s*,\s*([0-9\.]*)\s*\)/.exec(color)) {
      quadruplet = [parseInt(match[1], 10), parseInt(match[2], 10), parseInt(match[3], 10),parseFloat(match[4])];

      // No browser returns rgb(n%, n%, n%), so little reason to support this format.
    } else {
      quadruplet = colors[color];
    }
    return quadruplet;
  }

  // Some named colors to work with, added by Bradley Ayers
  // From Interface by Stefan Petre
  // http://interface.eyecon.ro/
  var colors = {
    'aqua': [0,255,255,1],
    'azure': [240,255,255,1],
    'beige': [245,245,220,1],
    'black': [0,0,0,1],
    'blue': [0,0,255,1],
    'brown': [165,42,42,1],
    'cyan': [0,255,255,1],
    'darkblue': [0,0,139,1],
    'darkcyan': [0,139,139,1],
    'darkgrey': [169,169,169,1],
    'darkgreen': [0,100,0,1],
    'darkkhaki': [189,183,107,1],
    'darkmagenta': [139,0,139,1],
    'darkolivegreen': [85,107,47,1],
    'darkorange': [255,140,0,1],
    'darkorchid': [153,50,204,1],
    'darkred': [139,0,0,1],
    'darksalmon': [233,150,122,1],
    'darkviolet': [148,0,211,1],
    'fuchsia': [255,0,255,1],
    'gold': [255,215,0,1],
    'green': [0,128,0,1],
    'indigo': [75,0,130,1],
    'khaki': [240,230,140,1],
    'lightblue': [173,216,230,1],
    'lightcyan': [224,255,255,1],
    'lightgreen': [144,238,144,1],
    'lightgrey': [211,211,211,1],
    'lightpink': [255,182,193,1],
    'lightyellow': [255,255,224,1],
    'lime': [0,255,0,1],
    'magenta': [255,0,255,1],
    'maroon': [128,0,0,1],
    'navy': [0,0,128,1],
    'olive': [128,128,0,1],
    'orange': [255,165,0,1],
    'pink': [255,192,203,1],
    'purple': [128,0,128,1],
    'violet': [128,0,128,1],
    'red': [255,0,0,1],
    'silver': [192,192,192,1],
    'white': [255,255,255,1],
    'yellow': [255,255,0,1],
    'transparent': [255,255,255,0]
  };
})(jQuery);
</script>
</body></html>

              代码直接运行，即可改变颜色，我是雷锋求采纳

              撰写回答
              你尚未登录，登录后可以
              • 和开发者交流问题的细节
              • 关注并接收问题和回答的更新提醒
              • 参与内容的编辑和改进，让解决方法与时俱进
              推荐问题