Web Designing Tutorials

Create Show/Hide Effect in Image SlideShow Using JQuery

Google+ Pinterest LinkedIn Tumblr
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.

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

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

Read Also: How to Alter HTML Document Structure 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

Read Next: How To Register Event Handlers in JavaScript

Shuseel Baral is a web programmer and the founder of InfoTechSite has over 8 years of experience in software development, internet, SEO, blogging and marketing digital products and services is passionate about exceeding your expectations.

Write A Comment