簡單的隱藏和淡出在Javascript

Question

我想知道如果有人可以幫助我做一個簡單的隱藏和淡出當用戶懸停div「項目」，文本（H1）分享這將被隱藏和div將所示。一旦用戶離開item div，它會自動隱藏div social-btn並顯示h1。

這裏的代碼：

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

看到它在這裏的行動：

http://jsfiddle.net/A9WpU/

謝謝！

Answer 1

嘗試以下：

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

Demo

Answer 2

使用jQuery懸停：

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

Fiddle

Answer 3

$(function(){ 

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

}); 

這裏，選中此琴：

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

Answer 4

我覺得

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(); 
}) 

演示：Fiddle