Create Show/Hide Effect In Image SlideShow Using JQuery

The fadeOut() effect presented on the post “How to create Fade Effect in Image Slideshow using JQuery” which I have already posted, makes elements invisible but retains space for them in the document layout.

The hide() method, by contrast, removes the elements from the layouts as if the CSS display property was set to none. When invoked with no arguments, hide() and show() simply hide or show the selected elements immediately. With a duration argument, however, they animate the hiding or showing the process. hide() shrinks an element’s width and height to 0 at the same time that it reduces the element’s opacity to 0. show() reverses the process.

The toggle() command changes the visibility state of the elements, it is invoked on, if they are hidden, it calls show(), and if they are visible, it calls hide(). As with show() and hide(), you must pass a toggle() to get an animated effect. Passing true to toggle() is the same as calling show() with no arguments. Note also that if you pass two or more function arguments to toggle() it registers event handlers.

Also Read: How to Create Animated Visual Effects Using jQuery

Here is an example that invokes methods for show/hide effect for creating image slideshow using JQuery. The first image has show() effect animation, the second image has to hide() effect animation and the third animation has toggle() effect animation.

$("#img1").show(2000);
$("#img2").hide(3000);
$("#img3").toggle(1000);

Here are some examples to show show(), hide() and toggle() effects using jQuery.

Table of Contents

Example of show() Effect

<script>
  $(document).ready(function(){
    $(#btn1).click(function () {
      $("#img1").show(2000);
    });
  });
  </script>
<input type=button id="btn1" value="Start Show"/>
<img id="img1" src="img1.jpg">

Preview

Example of hide() Effect

<script>
  $(document).ready(function(){
    $(#btn2).click(function () {
      $("#img2").hide(3000);
    });
  });
  </script>
<input type=button id="btn2" value="Start Hide"/>
<img id="img2" src="img2.jpg">

Preview

img2 | Create Show/Hide Effect in Image SlideShow Using JQuery

Example of toggle() Effect

<script>
  $(document).ready(function(){
    $(#btn3).click(function () {
      $("#img3").toggle(1000);
    });
  });
  </script>
<input type=button id="btn3" value="Start Toggle"/>
<img id="img3" src="img3.jpg">

img3 | Create Show/Hide Effect in Image SlideShow Using JQuery

Full jQuery code for Show/Hide effect image animation

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
</script>
<style>
.show_hide
{
 box-shadow:1px 1px 5px 2px #6DC83C;
 position:relative;
 width:448px;
 height: 336px;
 border-radius:19px;
}
.show_hide img
{
 border-radius:19px;
 position:absolute;
 left:0;
 top:0;
}
</style>
<script>
$(function(){
 $('.show_hide img:gt(0)').hide();
 setInterval(function(){$('.show_hide :first-child').hide(3000).next('img').show(3000).end().appendTo('.show_hide');}, 6000); });
</script>
<div class="show_hide">
<img src="img1.JPG" />
 <img src="img2.JPG" />
 <img src="img3.JPG" />
</div>

Preview of Show/Hide effect image animation