Question

我在jquery中编写了一个简单的函数，在点击按钮后将css类添加到我的div照片中 $('#btn1').click(function(){ $('#div1').addClass('show'});

我希望弹出这个div（实际上是内容）。 CSS：

#div1 {
display: none;
position: fixed;
top: 0;
bottom: 0;
left: 0;
right: 0;
max-width: 100%;
max-height: 100%;
margin: auto;
overflow: auto;
}

.show {
display: block!important;  
}

到目前为止完美无缺。但是我希望这个div在2s之后再次消失，所以我把它添加到jquery：

$('#btn1').click(function(){
$('#div1').addClass('show').delay(2000).removeClass('show')
});

现在它根本没有任何意义。那我的问题在哪里？我也试过了setTimeout：

<script>
$('#btn1').click(function(){
$('#div1').addClass('show')
});

setTimeout(function() {
$('#div1').removeClass('show')
}, 2000);
</script>

我刚开始编程，所以我很感激可能最容易理解的代码。感谢您的帮助。

Answer 1

使用以下内容。您实际上是在按钮单击事件之外添加超时功能。因此，实际上在页面加载时运行，并在您单击按钮之前结束。

$('#btn1').click(function(){
  $('#div1').addClass('show');
  setTimeout(function(){$('#div1').removeClass('show');},2000);
});

希望这有帮助。

Answer 2

像@Taplar指出的那样，你不能在这里使用delay()，因为dalay只会影响使用效果队列的方法。由于addclass和removeClass不使用效果队列，因此会立即执行。我的建议是使用fadeOut因为我认为这就是你想要延迟2000的原因

$('#btn1').click(function(){
    $('#div1').show().fadeOut(2000);
});

如果您坚持使用dalay功能，则可以将其与fadeOut一起使用

$('#btn1').click(function(){
    $('#div1').show().delay(2000).fadeOut();
});

https://plnkr.co/edit/42mr0Z3rKNBZI9Y64enC?p=preview

Answer 3

语法错误，应该是

$('#btn1').click(function(){
  $('#div1').addClass('show');
});

为什么在jquery中添加第二个函数后我的对象没有出现？

3 个答案: