jquery - jqueryはx秒後に画像を表示および非表示にします

Question

2秒間表示して画像を表示し、それを非表示にしてチャートを表示したい。2秒後にチャートが表示される部分がありますが、画像の配置方法がわかりません。

$("li").click(function(){
    //Toggle List
    $(this).toggleClass("active");
    $(this).next("div").stop('true','true').slideToggle();
    //SHOW image for 2 seconds and then HIDE IT
    var did = $(this).attr('id');
    var graphic;

    if($(this).next("div").html() == '')
        {
        graphic = '';
            $.ajax({
               url: 'pulse.php?did='+did, success: function(data)
             {
             graphic = data;
             }
        });
    }

    //Here I show the chart after 2 seconds pulling the data from pulse.php...
delay(function(){               
    $("#"+did).next("div").html(graphic);
    }, 2000 );
});


    //Delay function
var delay = (function(){
var timer = 0;
         return function(callback, ms){
         clearTimeout (timer);
         timer = setTimeout(callback, ms);
     };
})();

Answer 1

あなたが持っているものがすでに機能している場合は、適切な場所で画像要素を表示および非表示にするだけの問題だと思います。

$("li").click(function(){
    $("#imageElementID").show(); //show image on click
    $(this).toggleClass("active");
    $(this).next("div").stop('true','true').slideToggle();
    //SHOW image for 2 seconds and then HIDE IT
    var did = $(this).attr('id'), graphic;
    if ($(this).next("div").html() === '') {
        graphic = '';
        $.ajax({
            url: 'pulse.php?did='+did, 
            success: function(data) {
                graphic = data;
            }
        });
    }
    delay(function(){               
        $("#imageElementID").hide(); //hide image after some sort of delay function ?
        $("#"+did).next("div").html(graphic);
    }, 2000 );
});​