jquery show and hide image after x seconds

Я хочу показать и изображение в течение 2 секунд и скрыть его, чтобы показать график. У меня есть часть появлений графика через 2 секунды, но я не знаю, как поставить изображение.jquery show and hide image after x seconds

$("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); 
    }; 
})();

источник

2012-07-03 Helder Alvarez

это поможет, если вы форматировать Ваш код красиво и положить некоторые комментарии или HTML в контексте –

Где определяется 'delay()'? Кажется, это то же самое, что и 'setTimeout'? (По сравнению с анимацией jQuery '.delay()' function?) Не можете ли вы добавить '$ (" # yourIMG "). Show()' в начале вашего кода, а затем поместить '$ (" # yourIMG ") .hide() 'в том же месте, где вы показываете график? Кроме того, вы, кажется, получаете диаграмму через Ajax, так почему бы не скрыть изображение и показать диаграмму в обратном вызове Ajax? (Использование задержки для предоставления Ajax времени для завершения не очень аккуратный или надежный метод.) – nnnnnn

Если то, что у вас есть уже работает, я предполагаю, что это просто вопрос отображения и скрытия элемента изображения в нужных местах:

$("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); 
});

источник

2012-07-03 00:30:27 adeneo

jquery show and hide image after x seconds

ответ

Смежные вопросы