Jquery on click image effect - Mostlikers

14 April, 2015

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.

Jquery image on click effects


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







Related post


No comments:

Post a comment