Задержка отображения изображения работает только один раз

Question

У меня возникла ситуация, когда мне нужно задержать отображение определенного изображения на странице. Страница - это карта изображений в США. Когда пользователь нажимает на состояние, на карте отображается надпись на основе jQuery, чтобы показать информацию этого состояния.

Изображение, о котором идет речь, находится внутри этого наложения, но его положение установлено на фиксированное, поэтому оно не будет прокручиваться. Он появляется поверх наложения перед наложением, поэтому я немного его откладываю. Эта часть отлично работает. Вот мой код:

$(document).ready(function() { 
    setTimeout(function(){ 
     $('.scrollInst').fadeIn(500); 
    }, 3000); 

    });  

Проблема заключается в том, что, когда пользователь нажимает на кнопку закрытия (X) на накладке, чтобы закрыть его, задержанное замирание в изображениях перестает задерживать и выцветание в каждом последующем оверлее что. пользователь открывает, нажав на другое состояние на карте, отображает изображение без задержки и затухает. Другими словами, он полностью прекращает работу, и изображение появляется сначала перед наложением, которое было исходной проблемой, которую я решил с задержкой/fadeIn.

Мне нужно найти способ «сбросить» этот div в исходное состояние, чтобы при щелчке пользователем следующего состояния на карте и появлении нового наложения изображение задерживается и исчезает, как это было на первый оверлей.

Я попытался добавить fadeOut() и скрыть() к кнопке закрытия, думая, что он сбросит этот div, но это просто заставляет его больше не показывать div после нажатия кнопки закрытия.

$(".close").click(function(){ 
    $(this).parents(".overlay").hide("scale", 300, function(){ 
$('.scrollInst').css('display','none'); 
}); 

Любые идеи?

Кстати ... Это не обычный сайт. Он будет отображаться из локальной копии, загруженной на планшет. Используемый браузер (Dolphin) не работает с переходами CSS, так что это не может быть и речи.

Answer 1

Пример вашего кода будет очень полезен. Однако, я думаю, я понимаю эту проблему. Вот некоторые ключевые моменты.

A. Для начальной задержки вам не требуется setTimeout. jQuery имеет встроенный метод «delay()».

$('.scrollInst').delay(300).fadeIn(500); 

B. Когда вы говорите, «сбросить» в DIV, вы имеете в виду HTML-содержимое DIV или значение CSS в DIV? Содержимое HTML можно сбросить:

$('.whatever-selector').html(""); 

CSS может быть «сбросить» путем простого изменения значения с «CSS) (» метод.

$('.whatever-selector').css({top: 0, left: 0, etc}); 

C. В целом я думаю, что ваш подход может быть немного отключен. Что должно произойти, когда вы нажимаете на элемент на карте, jQuery создает наложенный div, вводит его в DOM (непрозрачность 0, поэтому он не отображается), а затем использует Fade in, чтобы изящно анимировать его на странице. При закрытии оно должно исчезнуть, а затем очистить содержимое для следующего наложения.

Надеюсь, что это поможет.