<!DOCTYPE html>
<html lang="en" >
<head>
<meta charset="UTF-8">
<title>jquery clip effect</title>
<link rel="stylesheet" href="css/style.css">
</head>
<body>
<script type="text/javascript" src="https://code.jquery.com/jquery-1.3.2.min.js"></script>
<script type="text/javascript" src=" https://ajax.googleapis.com/ajax/libs/jqueryui/1.7.2/jquery-ui.js"></script>
<button id="hide"> Hide </button>
<button id="show"> Show</button>
<div class="target">
<img src="http://www.protorials.com/wp-content/uploads/2014/08/lawn_mower.jpg" alt="jQuery" />
</div>
<script src="js/index.js"></script>
</body>
</html>
/*Downloaded from https://www.codeseek.co/daveontrak/jquery-clip-effect-mFsAB */
.target {
margin-top: 10px;
}
img {
border: 1px solid black;
border-radius: 20px;
padding: 0;
box-shadow: 3px 3px 5px 2px #999;
}
/*Downloaded from https://www.codeseek.co/daveontrak/jquery-clip-effect-mFsAB */
$(document).ready(function() {
$("#hide").click(function() {
$(".target").hide("clip", {
direction: "horizontal"
}, 1000);
});
$("#show").click(function() {
$(".target").show("clip", {
direction: "vertical"
}, 1000);
});
});
Bootstrap
Angular
ReactJS
jQuery
VueJS
HTML
CSS
JavaScript
jQuery
v1.3.2
