隐藏和显示元素（切换）仅一段时间然后消失

Question

我需要在 div 中隐藏一个带有 link 的 div。起初，它仍然可见，并且 undo link 允许撤消该操作。如果在 1.5-3 秒的范围内没有执行撤消操作，则磁贴会消失。这是我试过的： http://jsfiddle.net/2jexgo3m/7/

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title></title>

<style>
.metricsTile {
    width:275px;
    height:275px;
    border:1px solid #000;
}
.heading {
    width:275px;
    height:30px;
    border-bottom:1px solid #000;
}
.title {
    width:230px;
    float:left;
     border:1px solid #000;
}
.hideTile {
    width:25px;
    float:left;
    padding-left:5px;
    border:1px solid #000;
}
.content {
    width:275px;
}
.hideTile {
    font-size:13px;
}
.hidden {
    display:none;
}
.undoHide {
    display:none;
}
</style>
<script>
    $(function() {
        var hide = $('.undoHide').data('hidden'); 
            $("div.hideTile").click(function () {
            $(this).closest('.metricsTile').find('.content').hide();
            if ($('.undoHide').css('display') == 'none') {
                $(".undoHide").css("display","block");
                hide = $('.undoHide').data('hidden',true); 
            }        
            $(".title").html("Hidden");
            $(".undoHide").click(function () {
                $('.content').show();
                $(".undoHide").css("display","none");
                $('.title').html('BUSINESS');
                hide = $('.undoHide').data('hidden',false);  
           });

          if( $('.undoHide').attr("data-hidden") == 'true' )  {
           setTimeout(function() {   //calls click event after a certain time
           $('.metricsTile').fadeOut().remove();
           }, 3000);  
        }  
        });
    });
</script>
</head>
<body id="index" class="home">
<div class="metricsTile">
    <div class="heading">
        <div class="title">TITLE</div>
        <div class="hideTile">hide</div>       
   </div>
    <div class="content">
        <p>Description and Images</p>
    </div>
    <div class="undoHide" data-hidden="">Undo</div>
</div>
</body>
</html>

淡出部分不起作用。

SO 上的这个问题看起来很相似，但对我的情况没有帮助。 Make hidden div appear then fade away?

如果能帮助我理解我在哪里犯了错误，我们将不胜感激。

Answer 1

用 clearTimeout() 试试，你也有一些理解问题。

这里的这部分永远不会是真的：

if( $('.undoHide').attr("data-hidden") == 'true' )  {
       setTimeout(function() {   //calls click event after a certain time /> Hmm, no click event in here...
       $('.metricsTile').fadeOut().remove();
       }, 3000);  
    }

它在页面加载时调用一次，因此您必须在点击时检查它：

$(function () {
    var timeout;
    $("div.hideTile").click(function () {
        $(this).closest('.metricsTile').find('.content').hide();
        $('.undoHide').show();
        $(".title").html("Hidden");
        timeout = setTimeout(function () { //calls fadeout after a time
            $('.metricsTile').fadeOut(function(){
                $(this).remove();
            });
        }, 3000);

    });

    $(".undoHide").click(function () {
        clearTimeout(timeout);
        $('.content').show();
        $(".undoHide").hide();
        $('.title').html('BUSINESS');
    });
});

这里是fiddlehttp://jsfiddle.net/jvhjqcfu/ 希望对你有帮助

隐藏和显示元素（切换）仅一段时间然后消失

hide and show element(toggle) only for some time and then fade away

html

jquery

fade

toggle

hide