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.


take the div's and give class names
<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>



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;}



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>

   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 );

Live Demo   Download Script


Mohammad Khasim
Blogger | Web Developer
Hyderabad - INDIA

Web Development Tools | CMS | Frameworks | SEO

Get my Latest Lessons