简单的隐藏和淡出在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