Onlclick function not working?

jquery

#1

Can somebody take a look at my code, I have an onclick function, when you click my div it will play an animation, like a shake or bounce, seems like everything is fine but nothing is happening when I click on my block.

<!DOCTYPE html>
<html>
<head>
	<title></title>
	<style type="text/css">
		body{
			padding: 1%;
			background-color: red;
		}

		.block{
			width: 100px;
			height: 100px;
			background-color: blue;
			margin: 1%;
		}
	</style>
</head>
<body>

	<div id="shake" class="block">
		
	</div>

	<div id="swing" class="block">
		
	</div>

	<div id="bounce" class="block">
		
	</div>


<script type="text/javascript" src="jquery-3.2.1.slim.min.js">
	$(document).ready(function() {

		$("#shake").click(function(){
			 $("#shake").effect( "shake", {times:4}, 1000 );		
		});

	});
</script>


</body>
</html>

#2

If this is a lesson we can be more helpful when given a link to the exercise. Please post. Thanks.


#3

putted the code on codepen, https://codepen.io/codeWurm/pen/VygMMR


#4

So it’s not a lesson, then?


#5

We can only do one thing at a time with the script tag. Import a file OR enclose a script.

<script type="text/javascript" src="jquery-3.2.1.slim.min.js"></script>
<script>
	$(document).ready(function() {
		$("#shake").click(function(){
			 $("#shake").effect( "shake", {times:4}, 1000 );		
		});
	});
</script>

#6

Something my own.
Why does it says $(…).effect is not a function, I have the full jQuery library.


#7

The slim version does not have ajax or effects module.


#8

I alreadyhad inserted the jquery-3.3.1.js uncompressed one.


#9

I was able to get this to work in Firefox, but not Chrome.

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>shake demo</title>
  <style>
  .block {
    display: inline-block;
    width: 100px;
    height: 100px;
    background-color: blue;
  }
  </style>
  <!--script src="https://code.jquery.com/jquery-1.12.4.js"></script-->
  <script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
  <script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
</head>
<body>
  <div id="shake" class="block"></div>
  <div id="swing" class="block"></div>
  <div id="bounce" class="block"></div> 
  <script>
    $("#shake").click(function(){	
      $(this).effect("shake", {'times': 4}, 1000);
    });
  </script> 
</body>
</html>

Seems the UI module is required.

bounce also works, but not swing which is default value for animate() easing.


#10

This topic was automatically closed 7 days after the last reply. New replies are no longer allowed.