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>
mtf
January 20, 2018, 8:50pm
2
If this is a lesson we can be more helpful when given a link to the exercise. Please post. Thanks.
mtf
January 20, 2018, 8:59pm
4
So it’s not a lesson, then?
mtf
January 20, 2018, 9:15pm
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>
Something my own.
Why does it says $(…).effect is not a function, I have the full jQuery library.
mtf
January 20, 2018, 9:54pm
7
The slim version does not have ajax or effects module.
I alreadyhad inserted the jquery-3.3.1.js uncompressed one.
mtf
January 20, 2018, 11:55pm
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.
system
Closed
January 27, 2018, 11:55pm
10
This topic was automatically closed 7 days after the last reply. New replies are no longer allowed.