Question

我需要在div中隐藏带有链接的div。首先，它仍然可见，撤消链接允许撤消该操作。如果在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');
    });
});

这里是小提琴http://jsfiddle.net/jvhjqcfu/ 希望它有所帮助

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

1 个答案: