Question

我正在尝试创建一个图片，该图片在一段时间内保持原位，然后被h3替换。

jquery的：

 $('#stories-dropdown h3').hide();
   $('#stories-dropdown img').delay(4000).hide();
   $('#stories-dropdown h3').delay(5000).show();

HTML：

<div id="stories-dropdown" class="dropdown">


<h3 id="h3">Sorry, we have no stories to show you now. Try again later.</h3>
<img src="pics/loding.gif" width="100px" id="img">
</div>

h3并非隐藏，图像也不是。此代码绑定到.click()函数。

Fiddle

Answer 1

一个问题是，您对延迟的使用是错误的，因为它只适用于使用基于队列的执行的方法

$('button').click(function() {
  $('#stories-dropdown h3').hide().stop(true).delay(4000).queue(function() {
    $(this).show();
  })
  $('#stories-dropdown img').show().stop(true).delay(4000).queue(function() {
    $(this).hide();
  })
})

#stories-dropdown h3,
#stories-dropdown img {
  display: none;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<button>Test</button>
<div id="stories-dropdown" class="dropdown">
  <h3 id="h3">Sorry, we have no stories to show you now. Try again later.</h3>
  <img src="http://sarkelliancreed.comule.com/Misc/loding2.gif" width="100px" id="img" />
</div>

演示：Fiddle

或者@ j08691建议 - 如果你可以使用小动画

$('button').click(function() {
    $('#stories-dropdown h3').hide().stop(true).delay(4000).show(1)
    $('#stories-dropdown img').show().stop(true).delay(5000).hide(1)
})

演示：Fiddle

Jquery显示并隐藏不起作用

1 个答案: