search

Home  >  Q&A  >  body text

jquery no response on button click - Stack Overflow

The code is as follows, clicking the button has no effect
<!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>

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


</script>

</body>
</html>

为情所困为情所困2752 days ago513

reply all(5)I'll reply

  • 天蓬老师

    天蓬老师2017-05-18 11:01:07

    animate will not change the color, so this gray is meaningless. In addition, even if you want to write color, gray should be enclosed in quotation marks, otherwise it will become an undefined variable.

    reply
    0
  • 高洛峰

    高洛峰2017-05-18 11:01:07

    color:'gray'

    reply
    0
  • 给我你的怀抱

    给我你的怀抱2017-05-18 11:01:07

    Remove $ in the parameter list

    reply
    0
  • 伊谢尔伦

    伊谢尔伦2017-05-18 11:01:07

    There should be no $ in function.
    animate does not have a color tag, but has an opacity tag for transparency transformation.
    Also, the value corresponding to the label should have single quotes''.

    reply
    0
  • 为情所困

    为情所困2017-05-18 11:01:07

    <!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/jquer...
    <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>

    <p id='cbox'>变化的Box</p>
    <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/jquer...

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

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

    reply
    0
  • Cancelreply