Skip to main content

Using jQuery for a Simple Animated Fade Effect


I know I have already done a fade effect between two images with jQuery, but here is a quick little piece of code that will just add a nice animated fade effect to single images. Whenever a person hovers over an image, we will use jQuery to lower the opacity to make it appear lighter. Easy and not that impressive but still pretty cool.

Make sure you first call jQuery.
<script type='text/javascript' src='jquery.js'></script>
Then just add the following code and all your images will have a slight fade when you hover over them.
<script type="text/javascript">
  $(document).ready(function(){
    $("img").hover(function() {
      $(this).stop().animate({opacity: "0.8"}, 'slow');
    },
    function() {
      $(this).stop().animate({opacity: "1"}, 'slow');
    });
  });
</script>
If you only want this to occur on certain images than just make sure to change the first jQuery selector to the class name of the images your want this effect to affect.
Try it out below:

Comments

  1. AnonymousMay 8, 2012 at 2:08 PM

    I have used this jQuery to animate my buttons and logo etc. on my website.
    I want SOME of the images to remain as images and not have this effect on them.
    Is there any code that I can put in to disable this script from effecting all of the images?

    Thanks in advance,

    Chris

    ReplyDelete

Post a Comment

Popular posts from this blog

உடல் எடையை குறைக்க வேண்டுமா ?

இன்றைய அவசர உலகின் மிக பெரிய பிரச்சனையாக இருப்பது உடல் எடை அதிகரிப்பது தான்.மனம் போன போக்கில் உணவு கட்டு பாடு இல்லாமல் கண்டதையும் உள்ளே தள்ளுவதும்,உக்காந்த இடத்திலேயே கணணி முன் நேரத்தை விரயமாக்குவதும் தான் இந்த பிரச்சனைக்கு மூல காரணமாகும். அது சரி இந்த பிரச்சனையை எப்படி இல்லாமல் செய்வது அல்லது உடல் எடையை எவ்வாறு குறைப்பது என்பதை பற்றி பாப்போம் , பல வருட ஆரய்சிக்குபின் மருத்துவர்கள்   உடல் எடைய குறைக்க மிகவும் சுலபமான உடற்பயிற்சியை கண்டுபிடித்துள்ளனர்.இது  100% பயனளிக்க கூடியது, எந்த இடத்திலும் எந்தநேரத்திலும் மிக சுலபமா செய்ய கூடிய உடற் பயிற்சியாகும்.இந்த உடற்பயிற்சிகள் படத்துடன் கீழே தரப்பட்டுள்ளது நீங்களும் முயற்சித்து பாருங்கள கண்டிப்பாக பலன் கிடைக்கும்... முதலில் நாற்காலியில் உட்கார்ந்து இட  பக்கம் பார்கவும் .. ..        அடுத்து  நாற்காலியில் உட்கார்ந்து வல  பக்கம் பார்கவும்  ....  நண்பர்கள் யாரவது மச்சி வாடா சின்ன பீஸ் ,இங்க பாரு சூப்பர் அய்டம்னு சொல்லி கால்ல விழுந்து கூப்பிட்டலோ மேற்கூறிய உடற் பயி...
Post a Comment
Read more

(Loot again) Get Mi Earphones & Mi Backpack In Just Rs.1

How to Get Mi Band , Mi Earphones & Mi Backpack In Just Rs.1 1, First Of All Just  Click On Below Links 1 By 1  Click 1->  Mi City Backpack Dark Grey Minimalist sleek design  -In Just Rs.1 Click 2->  Mi Earphones Silver Dynamic bass sound  -In Just Rs.1 2. Now Open All Links 1 By 1 3. After Opening The Link Click On “ Click to Bring The Price Down ” Then Click “ I Want it too ” 4. Login into Your Mi Account ( Or Sign Up  –  New Mi Account Giving Huge Price drop Like Rs.50 Or Rs.70 Drop , So Recommend You to Make New Account ) 5. Now You will See 3 Products There In this  Mi 24 Hour Madness Sale  6. Click On “ Participate ” Now Button & Share The Link With Your Friends When Each Friend Click On Your Link , You Will See Some Price cut in Your Products… Finally After Enough Click Your Product Will be Available For Just Rs.1  7. Start Referring , Start Looting MI
Post a Comment
Read more

20 Best Themes For Windows XP

Have you been using  Windows XP  since a long time and tired of it’s dull looks? Then it’s time to give a facelift to XP by changing it’s look and feel. There are lots of  free visual style themes  available based on  Windows Vista ,  Windows 7 , Mac OSX ,  XBox ,  Linux  etc. In this article, we present the best of them. If you are installing a Visual Theme for the first time on your Windows XP, then you might want to check our article How to install visual themes in Windows XP?  first before applying the themes. Here goes our handpicked list of  Twenty Best Windows XP Themes  for your PC. If you are looking for more  Windows XP  Themes, you might want to check our other article:  20 Awesome  Windows XP Themes . 1.  Vista Live Pack One of the best Windows Vista based themes with a touch of Windows Live. There are many color variants, including Vista Live Blue (shown above), Vista Live Green, Vista Liv...
Post a Comment
Read more