CODEWITHSUNDEEP
javascriptjqueryhidefadein
Kareen Lagasca
Kareen Lagasca

Reputation: 939

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!!!

Upvotes: 1

Views: 1069

Answers (4)

Arun P Johny
Arun P Johny

Reputation: 388316

I think

var sbtn = $('.social-btn');
$('h1.socialh1').hover(function(){
    sbtn.show();
},function(){
    var timer = setTimeout(function(){
        sbtn.hide();
    }, 200);
    sbtn.data('hidertimer', timer);
});
sbtn.hover(function(){
    clearTimeout(sbtn.data('hidertimer'))
}, function(){
    sbtn.hide();
})

Demo: Fiddle

Upvotes: 1

udidu
udidu

Reputation: 8588

$(function(){

    $('.item').hover(function() {
        $('.socialh1').fadeOut('fast');
        $('.social-btn').fadeIn('fast');
    }, function() {
        $('.socialh1').fadeIn('fast');
        $('.social-btn').fadeOut('fast');
    });

});

Here, Check this fiddle:

http://jsfiddle.net/A9WpU/4/

Upvotes: 1

Harry
Harry

Reputation: 89750

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

Upvotes: 1

Jonathan
Jonathan

Reputation: 9151

Use JQuery hover:

$(".item").hover(
function () {
    $(this).find(".socialh1").fadeOut();
    $(this).find(".social-btn").fadeIn();
},
function () {
    $(this).find("social-btn").fadeOut();
    $(this).find(".socialh1").fadeIn();
});

Fiddle

Upvotes: 0

Related Questions