javascript - Javascript 中的简单隐藏和淡入淡出

Question

我想知道当用户悬停div“项目”时是否有人可以帮助我做一个简单的隐藏和淡入淡出，文本（h1）共享这将被隐藏并显示div。一旦用户离开项目 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');
});

演示

Answer 2

$(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 3

我认为

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

演示：小提琴

Answer 4

使用 JQuery 悬停：

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

小提琴