JQuery показать и скрыть не работает

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