jQuery is a great library of JavaScript function. You can easily create special effects in page with the help of jQuery. Most common jQuery effects are drop down menus, drag and drop elements and animations. Professional Web Designers effectively uses jQuery to change the opacity of various HTML elements like image tag <img> and ordered list or unordered list <ol> or <li> etc. All standard browsers supports jQuery which makes it more important for web developers. In Blogger, you can increase the appearance of your article and make your Blog template to look more professional with the help of jQuery by adding special effect in the post. So lets see how it works ?

Change Opacity Of An Element Using jQuery:-

The complete jQuery code given below is an example to change the opacity of an image from any desired value to any desired value with animation, which will execute on mouse hovering.

Change Opacity Of An Image Using jQuery:-

/* Code Written on http://internetricks4u.blogspot.com/ */

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js" type="text/javascript"></script> 

<script type="text/javascript">
    $(document).ready(function() {
        $('img').each(function() {
             $(this).hover(function()  {
                $(this).stop().animate({ opacity: 0.3 }, 500);
            },
           function() {
               $(this).stop().animate({ opacity: 1.0 }, 500);
           });
        });
    });
</script>
/* Code Written on http://internetricks4u.blogspot.com/ */

Explanation:-

This simple jQuery script changes opacity of images from 0.3 (Mouse hover state) to 1.0 ( Normal state) with animation. Corresponding HTML code is given below.

<div>      
    <img src="URL Of Image 1" />
    <img src="URL of Image 2"  />
</div>

Suppose if you want to focus a particular image that comes under specific CSS id or class then the corresponding jQuery and HTML code is as follows

HTML Code

<div>

 <div id="testingcss"> 
    
    <img src="Image url"/>      
         
         <div id="workingcss">   
         <img src="Image Url 1"/>
         <img src="Image Url 2"/>
         </div>     

  </div>

</div>

jQuery Code

For hovering a image that comes under the CSS id workingcss, without affecting the image that comes under testingcss id, the following changes should be done in above jQuery code.

.
/* Code Written on http://internetricks4u.blogspot.com/ */

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js" type="text/javascript"></script>  

<script type="text/javascript">
    $(document).ready(function() {
     $("#workingcss img").hover function(){
           $(this).hover(function() {
                $(this).stop().animate({ opacity: 0.3 }, 500);
            },
           function() {
               $(this).stop().animate({ opacity: 1.0 }, 500);
           });
        });
    });
</script>
/* Code Written on http://internetricks4u.blogspot.com/ */

Only the code in pink color should be change in order to focus particular image.

More Article From The Same Author

Friday, 8 June 2012