Jquery on click image effect

The jquery library provides several techniques for adding animation to a web page. all effects animation make my website very attractive. it's very simple code, We can use frequently all animation effect. In this tutorial i have created Jquery on click effect.

Live demo

Jquery library provide several effects below i have mention list of effects in jquery.

.animate() - Perform custom animation of a set of css

.clearQueue() - Remove from the queue all item

.delay() - Set timer to delay execution.

.dequeue() - Execute the queue function to matching element.

.fadeIn() - Fadein the set element

.fadeOut() - Fade out the set element

.fadeTo() - Adjust the opacity

.fadeToggle() - Display the matching element with animated effect.

.finish() - Stop current running animation.

.hide() - Hide matching element

.queue() - Show or manipulate the queue of functions to be executed on the matched elements.

.show() - Show matching element

.slideDown() - Display the matching element in sliding down effect.

.slideToggle() - Display the matching element in sliding motion

.slideUp() - Hide the matching slide element

.stop() - Stop the current element animation.

.toggle() - Display or hide the matched elements

HTML

<html>
  <head>
    <title>Jquery image on click effects.</title>
  </head>
  <body>
    <h2>On Cilck effect</h2>
    <img class="active_image" src="download.png">
    <img class="deacative_image decative" src="holidays.gif">
  </body>
</html>

Jquery

<script src="http://code.jquery.com/jquery-2.1.3.min.js"></script>
<script>
$(document).ready(function(){
  $(document).on('click','.active_image',function(){
     $('.active_image').hide();     
     $('.deacative_image').show();
     return false;          
  });
});
</script>
<style type="text/css">
.decative {display: none;}
</style>

Try Your Self >>

I hope this post helpful for you. Thank you for visiting.

"It does not matter how slowly you go as long as you do not stop."

Menu Link

14 April, 2015