Learning jQuery

You have seen on many blogs for social media sharing icon where you take mouse over on the icon, the icon jumps up. See below picture for more details.

In this post, I will show you how you can achieve the same thing using jQuery. For the demo, I have placed all the social media icon within a div and I have also set the opacity of the image to 0.5 on document.ready. What we need to do is that on mouseover, adjust the top position of the image and on mouseout reset the top position.

$(document).ready(function(){
    $("#divSocial a img").css({ opacity: 0.5 });
     $("#divSocial a img").hover(
       function () {
            $(this).animate({ top: "-15" });
            $(this).css({ opacity: 1 });
       }, 
       function () {
            $(this).animate({ top: "0" });
            $(this).css({ opacity: 0.5 });
       }
   );
});

Don't forget to set the relative position of the div, otherwise changing the top attribute value will not work.

#divSocial a img
{
    position: relative;
}

Feel free to contact me for any help related to jQuery, I will gladly help you.