Question

我在页面上有一个段落。如果用户点击它，它会隐藏。如果在6秒内没有点击，它就会隐藏起来。

$("#parahide").on("click", function () {
    $(this).slideUp('400');
});

如何编写para以在6秒内隐藏自身？有什么用setTimeOut或任何其他方式吗？

Answer 1

您可以结合使用jQuery＆＃39; delay和dequeue：

＆＃13;

$("#parahide").on("click", function () {
  $(this).dequeue().slideUp('400');
}).delay(6000).slideUp('400');

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<p id="parahide">
  Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</p>

＆＃13;

请注意，需要dequeue - 否则动画会一直等到delay完成。

Answer 2

使用此：

var myTimeout = setTimeout(function(){
    $("#parahide").slideUp('400');
}, 6000);

$("#parahide").on("click", function () {
    $(this).slideUp('400');
    clearTimeout(myTimeout);
});

JSFIDDLE：http://jsfiddle.net/ghorg12110/5dg8rf0k/1/

Answer 3

这应该有效：

$('#parahide').click(function(){ //hides element when click is made
   $(this).slideUp('400'); 
});

var fun = setTimeout(function () {
    $("#parahide").slideUp('400');
},6000); //will hide element in 6 seconds if no click is made

fun();
clearTimeout(fun);

的jsfiddle：

http://jsfiddle.net/2oj6pv1q/1/

Answer 4

使用此代码：

<script src="http://code.jquery.com/jquery-1.11.1.min.js"></script>
<div id= 'successMessage'>Hide this Div</div>  
<script>
    setTimeout(function() {
            $("#successMessage").hide()
        }, 6000);
        $('#successMessage').click(function(){
            $("#successMessage").hide()
    });
</script>

单击时间段或隐藏它

4 个答案: