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

Simple Hide and Fade In Javascript

本文关键字：淡入 淡出 隐藏 简单 Javascript      更新时间：2023-09-26

当用户悬停在div"item"时，文本（h1）Share This将被隐藏，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/

谢谢！！！

尝试以下操作：

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

演示

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

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

http://jsfiddle.net/A9WpU/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

使用JQuery悬停：

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

Fiddle

相关文章：