Показать полноэкранное изображение, подождите 2 секунды, закрыть изображение, открыть div - javascript / jquery

Question

Я пытаюсь открыть полноэкранное изображение на 2 секунды, а затем закрыть изображение. После того, как изображение закрыто, отображается другой элемент.

$("#explosion-image").attr('src', %image_url%);
$("#explosion-image").css({
   height:'100%', width:'100%', position:'fixed', top:0, left:0
});
$("#explosion-image").show();
$("#explosion-image").delay(2000);
$("#explosion-image").hide();
$("#explosion-image").attr('src', '');
$("#div-to-open").show();

Этот код только открывает изображение, а затем ничего не делает: (

Заранее спасибо за помощь

Answer 1

попробуйте эту скрипку:

http://jsfiddle.net/maniator/JhcGb/

$("#explosion-image").css({
    height: '100%',
    width: '100%',
    position: 'fixed',
    top: 0,
    left: 0,
    display: 'none'
}).show()
setTimeout(function() {
    $("#div-to-open").show();
    $("#explosion-image").hide();
}, 2000)

Answer 2

delay() действительно работает только на анимации.Вы должны использовать setTimeout вместо этого.Даже если это работает, вам нужно объединить вызовы:

$("#explosion-image").show().delay(2000).hide();