jquery clip effect

In this example below you will see how to do a jquery clip effect with some HTML / CSS and Javascript

Using the jquery clip effect with show/hide/toggle

This awesome code was written by daveontrak, you can see more from this user in the personal repository.
You can find the original code on Codepen.io
Copyright daveontrak ©


  • HTML
  • CSS
  • JavaScript
<!DOCTYPE html>
<html lang="en" >

  <meta charset="UTF-8">
  <title>jquery clip effect</title>
      <link rel="stylesheet" href="css/style.css">



  <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" />

    <script  src="js/index.js"></script>



/*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);