Submit your widget

JQuery Animations Button

Created 5 years ago   Views 22082   downloads 4381    Author Khalid Fattouchi
JQuery Animations Button
View DemoDownload 75.0 KB
95
Share |

In Part 1 of this tutorial, you designed a button sprite that will be coded with HTML, CSS, and JQuery in this part of the tutorial.

Step 1 – HTML

Different people will require a button for different purposes. The remainder of this tutorial will explain a simple scenario where the button functions as a simple download link. Create a link to an imaginary (or real) file for download:

<a href="path/to/download.zip" class="button"></a> 

Step 2 – CSS

Add the following CSS to your HTML document:

    .button {  
        width:570px;  
        height:64px; /* Notice that the height is not the height of the whole sprite, but the height of one single button */  
        display:block;  
        background-image:url(images/downloadbutton.png); /*path to the sprite*/  
        background-position: top; /* the background position (in combination with the height!) makes it possible that only the top of the whole sprite will be visible */  
    }  

When you apply the CSS code above, you will only see the grey button, because it’s positioned on top and the height is 64px

Link hover button

    .button:hover{  
        width:570px;  
        background-position: bottom;  
        height:64px;  
        background-image:url(images/downloadbutton.png) no repeat;  
    }  

When you apply the CSS code above, you will only see the green button when you hover the download button, because it’s positioned at the bottom and the height is 64px

Step 3 – Fading hover effect

This step is not necessary, but it’s an optional step. The transition will be smoothed with JavaScript. We’re going to use the popular jQuery library.

Step 4 – Add code between the head tags

First we need to refer in the head to the .js file that we’ve just downloaded.

    <script type="text/javascript" src="path/to/jquery-1.3.2.min.js"></script>  

After that we can add the following code between the head tags.

    <script type="text/javascript"&gt  
        $(document).ready(function() {  
            // Add the class 'button' just like in CSS with a dot in front of it  
            $('.button').append('<span class="hover"&gt</span&gt').each(function () {  
                var $span = $('&gt span.hover', this).css('opacity', 0);  
                $(this).hover(function () {  
                    $span.stop().fadeTo(500, 1); //Change the number 500 to change the speed of the Fade In  
                }, function () {  
            $span.stop().fadeTo(500, 0); //Change the number 500 to change the speed of the Fade Out  
                });  
            });  
        });  
    </script>  

How to deal with several buttons on one page

If you have several buttons on one page and you’d like to add the fading hover effect, you can give it a different class in the HTML and add this in the JavaScript above after the word .button and you need also to separate the words with a comma. (Example: ‘.button,.buttonTwo’)

Step 5 – Edit the CSS

    .button {  
        position:relative;  
        display:block;  
        height: 64px;  
        width: 570px;  
        background:url(images/downloadbutton.png) no-repeat;  
        background-position: top;  
    }  

view plaincopy to clipboardprint?

    .button span.hover { /*notice the different class: span.hover*/  
        position: absolute;  
        display: block;  
        height: 64px;  
        width: 570px;  
        background: url(images/downloadbutton.png) no-repeat;  
        background-position: bottom;  
    }  

The article source:http://www.tutorial9.net/tutorials/web-tutorials/creative-button-animations-with-sprites-and-jquery-part-2/