jQuery

Examples of custom effects

queue()/dequeue() methods demo

<style>
 #queue-block {
    margin: 3px;
    width: 40px;
    height: 40px;
    position: relative;
    left: 0px;
    top: 30px;
    background: green;
    display: none;
  }
  #queue-block.newcolor {
    background: blue;
  }
</style>
  
<div class="p-2 border border-dark" 
  style="height: 200px; width: 100%">

    <button id="start-demo-queue">start</button> 
    <button id="stop-demo-queue">stop</button>

    <div id="queue-block"></div>
</div>

<script>
$( "#start-demo-queue" ).click(function() {
  $("#queue-block")
    .show( "slow" )
    .animate({ left: "+=200" }, 5000 )
    .queue(function() {
      $( this ).addClass("newcolor").dequeue();
    })
    .animate({ left: '-=200' }, 1500 )
    .queue(function() {
      $( this ).removeClass("newcolor").dequeue();
    })
    .slideUp();
});
$( "#stop-demo-queue" ).click(function() {
  $("#queue-block")
    .queue("fx", [])
    .stop();
});
</script>

stop() method demo

Click the button to start the animation, then click again before the animation is completed. The animation will toggle the other direction from the saved starting point.

<style>
  #stop-block {
    background-color: #abc;
    border: 2px solid black;
    width: 200px;
    height: 100px;
    margin: 10px;
  }
</style>
<div class="p-2 border border-dark" style="height: 200px; width: 100%">

<button id="stop-demo">slideToggle</button>
<div id="stop-block"></div>
</div>
<script>
var $stopBlock = $("#stop-block");
 
// Toggle a sliding animation animation
$("#stop-demo").on("click", function() {
  $stopBlock.stop().slideToggle(1000);
});
</script>

delay() method demo

<style>
  div.delay-demo {
    position: relative;
    width: 60px;
    height: 60px;
    float: left;
  }
  #delay-demo-first {
    background-color: #3f3;
    left: 0;
  }
  #delay-demo-second {
    background-color: #33f;
    left: 80px;
  }
</style>
<div class="mb-2 p-2 border border-dark" style="height: 200px; width: 100%">
<p><button class="delay-demo m-2" >Run</button></p>
<div id="delay-demo-first"  class="delay-demo"></div>
<div id="delay-demo-second" class="delay-demo"></div>    
</div>

<script>
$("button.delay-demo").click(function() {
  $("#delay-demo-first").slideUp(300).delay(800).fadeIn(400);
  $("#delay-demo-second").slideUp(300).fadeIn(400);
});
</script>

Previous

Next