Search code examples
javascriptjqueryhidefadein

Simple Hide and Fade In Javascript

I was wondering if someone could help me out in doing a simple hide and Fade when the user hover the div "item", the text (h1) Share This will be hidden and the div will be shown. once the user leaves the item div, it will automatically hide the div social-btn and show the h1.

here's the codes:

<div class="item">

    <h1 class="socialh1">Share This!</h1>

    <div class="social-btn">
        <div class="Fb-btn">
        Facebook button here!
        </div>
        <div class="twitter-btn">
        twitter button here!
        </div>
    </div>

</div>

See it in action here:

http://jsfiddle.net/A9WpU/

thank you!!!

Solution

  • Try the below:

    $('.item').hover(function(){
    $('h1.socialh1').hide('fast');
    $('div.social-btn').show('fast');
},function(){
    $('div.social-btn').hide('fast');
    $('h1.socialh1').show('fast');
});

    Demo