jQuery Effects | Lessoncup Programming Blog

Monday, 4 November 2013

jQuery Effects

jQuery UI Effects. this lesson will show you about bunch of effects, you can learn how to use them in various ways to your website. i have developed this lesson with all useful effects.



HTML

take the div's and give class names
<ul>
<li class="e1" style="background-color:#F90; font-size:14px;"><p>Click me to Blind</p></li>
<li class="e2" style="background-color:#F00; font-size:14px;"><p>Click me to Bounch</p></li>
<li class="e3" style="background-color:#9C0; font-size:14px;"><p>Click me to Pulsate</p></li>
<li class="e4" style="background-color:#C3C; font-size:14px;"><p>Click me to Slide</p></li>
<li class="e5" style="background-color:#6CC; font-size:14px;"><p>Click me to Shake</p></li>
<li class="e6" style="background-color:#C00; font-size:14px; color:#FFF;"><p>Click me to Puff</p></li>
<li class="e7" style="background-color:#303; font-size:14px; color:#FFF;"><p>Click me to Highlight</p></li>
<li class="e8" style="background-color:#90F; font-size:14px;"><p>Click me to Fold</p></li>
<li class="e9" style="background-color:#FC0; font-size:14px;"><p>Click me to Fade</p></li>
<li class="e10" style="background-color:#396; font-size:14px;"><p>Click me to Explode</p></li>
<li class="e11" style="background-color:#6C3; font-size:14px;"><p>Click me to Drop</p></li>
<li class="e12" style="background-color:#F36; font-size:14px;"><p>Click me to Clip</p></li>
</ul>

CSS

<style>

body{ font-family:Verdana, Geneva, sans-serif; color:#000; font-size:11px; background-color:#FFF; margin:0; padding:0;}

#lessoncup{width:700px; height:550px; border:solid #CCC 1px; padding:5px; margin:0 auto; margin-top:40px; font-family:Arial, Helvetica, sans-serif; font-size:11px;}

ul{ list-style:none; margin:0; padding:0; margin-top:30px;}

li{ float:left; padding:5px; margin:12px; margin-top:5px; border:solid #CCC 5px;-webkit-box-shadow: 2px 2px 2px #666; width:180px;
box-shadow: 2px 2px 2px #666; width:130px; height:120px; background-color:#fff; cursor:pointer;}

</style>

JAVASCRIPT

include jquery ui library and use .effect() function to bind the effects to selector, enter the effect name in first parameter and second is speed, here i added callback function as a third parameter for those elements have hidden effects, it will show again.
<script type="text/javascript" src="jquery-1.10.2.min.js"></script>

<script type="text/javascript" src="jquery-ui.js"></script>

<script>
  
  $(document).ready(function(){
   
   $('.e1').click(function(){
       
    $(this).effect("blind",500,callback);
    
   });
   
   $('.e2').click(function(){
       
    $(this).effect("bounce",500);
    
   });
   
   $('.e3').click(function(){
       
    $(this).effect("pulsate",500);
    
   });
   
   $('.e4').click(function(){
       
    $(this).effect("slide",500);
    
   });
   
   $('.e5').click(function(){
       
    $(this).effect("shake",500);
    
   });
   
   $('.e6').click(function(){
       
    $(this).effect("puff",500,callback1);
    
   });
   
   $('.e7').click(function(){
       
    $(this).effect("highlight",500);
    
   });
   
   $('.e8').click(function(){
       
    $(this).effect("fold",500,callback2);
    
   });
   
   $('.e9').click(function(){
       
    $(this).effect("fade",500,callback3);
    
   });
   
   $('.e10').click(function(){
       
    $(this).effect("explode",500,callback4);
    
   });
   
   $('.e11').click(function(){
       
    $(this).effect("drop",500,callback5);
    
   });
   
   $('.e12').click(function(){
       
    $(this).effect("clip",500,callback6);
    
   });
   
   function callback() {
      setTimeout(function() {
        $( ".e1" ).fadeIn();},500);
    };
 
 function callback1() {
      setTimeout(function() {
        $( ".e6" ).fadeIn();},500 );
    };
 
 function callback2() {
      setTimeout(function() {
        $( ".e8" ).fadeIn();},500 );
    };
 
 function callback3() {
      setTimeout(function() {
        $( ".e9" ).fadeIn();},500 );
    };
 
 function callback4() {
      setTimeout(function() {
        $( ".e10" ).fadeIn();},500 );
    };
 
 function callback5() {
      setTimeout(function() {
        $( ".e11" ).fadeIn();},500 );
    };
 
 function callback6() {
      setTimeout(function() {
        $( ".e12" ).fadeIn();},500 );
    };
   
  });
  
</script>

Live Demo   Download Script

2 comments :

Mohammad Khasim
Blogger | Web Developer
Hyderabad - INDIA
lessoncup@gmail.com

PHP | My SQL | JQUERY
Web Development Tools | CMS | Frameworks | SEO

Get my Latest Lessons