谁能帮我弄清楚为什么我无法让jQuery震动效果在我的div上起作用？

Question

I've attached a JSfiddle of what my problem is. Everything else on the click of the button works except the shake effect and I cant seem to figure out why? I've tried changing it around etc but it still wont do it?

https://jsfiddle.net/g8t5ts8x/

  $(document).ready(function() { for(var i = 0; i < 16; i++) { for(var j = 0; j < 16; j++) { $('#grid').append('<div class= square></div>'); }; }; $(".square").mouseenter(function() { $(this).css("background-color", "#7fffd4"); }); //clears the canvas and resets the color on hover back to #7fffd4// $("#clear").click(function() { $("#grid").effect("shake", {times:4}, 1000); $(".square").css("background-color", "white"); $(".square").mouseenter(function() { $(this).css("background-color", "#7fffd4"); }); }); //creates a random color for each square when button is clicked// $("#randomcolor").click(function() { $(".square").mouseenter(function() { var randomColorChange = '#'+ (Math.random()*0xFFFFFF<<0).toString(16); $(this).css('background-color', randomColorChange); }); }); }); 

  * { margin: 0; padding: 0; border: 0; box-sizing: border-box; } body { font-family: Arial, sans-serif; background-color: white; } h1 { color: white; padding-top: 8px; padding-bottom: 8px; text-align: center; background-color: #191919; } span { text-decoration: underline; color: #7fffd4; } .buttons { padding-top: 10px; text-align: center; width: 480px; margin: 0 auto; } #clear, #randomcolor { margin: 5px; padding: 8px; border-radius: 1px; background-color: #191919; color: white; } .container { margin-top: 20px; } #grid { width: 484px; height: 484px; margin: 10px auto; border: 2px solid black; box-shadow: 2px 2px 30px 10px grey; } .square { width: 30px; height: 30px; margin: 0px; float: left; background: white; } 

  <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"> </script> <h1>Etch A <span>Sketch</span></h1> <div class="buttons"> <button id="clear">Reset Canvas</button> <button id="randomcolor">Random Colors</button> </div> <div class="container"> <div id="grid"></div> </div> 

Thanks!

Answer 1

$('selector').effect() is a jQueryUI feature. Your fiddle does not reference the jQueryUI libs.

Include references to a CDN source such as:

https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.css https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js

When I add these to your fiddle I see shaky buttons on click.

I have found to my own cost to check the separation between JQuery base and JQuery UI, and make no assumptions. JQuery swallows your errors if you refer to unknown methods in many cases so if you see something you expect to occur is not happening and it's a UI effect then check your assumptions.