Javascript中的简单隐藏和淡入

我想知道是否有人可以帮我做一个简单的隐藏和淡出当用户悬停在div“item”，文本（h1）共享这将被隐藏和div将显示出来。一旦用户离开项目div，它将自动隐藏div社交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>

分享这个！
Facebook按钮在这里！
推特按钮在这里！

请在此处查看它的实际操作：

谢谢你

使用JQuery悬停：

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

请尝试以下方法：

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

在这里，检查这把小提琴：

我想

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

---

演示：

谢谢你，哈利，你成功了！

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