jQuery анимации: fadeIn() скрытый div, не отображающий контент

У меня есть кнопка с идентификатором «start_game», которая имеет прикрепленную функцию щелчка и обратный вызов, чтобы выцветать кнопку, а затем исчезать в div, который в настоящее время установленный css для отображения: none.jQuery анимации: fadeIn() скрытый div, не отображающий контент

Когда я нажимаю кнопку, я вижу, что внешний контейнер div, который содержит все это, расширяется, как если бы освободить место для div, который должен отображаться, однако я никогда не вижу содержимого, которое у меня внутри.

Вот текущий код:

$("#start_game").click(function() { 
     $(this).fadeOut(); 
     $(".input-append").fadeIn(); 
    });

и HTML

<div class="hero-unit"> 
     <div id="container"> 
      <p>Shall we?</p> 
      <button class="btn-primary btn-large" id="start_game">Play!</button> 
      <div class="input-append hidden"> 
       <p>How many players?</p> 
       <input class="span2" id="appendedInputButton" type="text" /> 
       <button class="btn" type="button">Go!</button> 
      </div> 
     </div> 
    </div>

здесь только пользовательские CSS, другой файл КСС Twitter Bootstrap

.hidden { 
display: none; 
}

Теперь я попробовали многочисленные подходы. Я попробовал fadeIn, я попытался объединить несколько различных комбинаций show() или hide() или toggle() или fadeToggle(). Я также попытался подключить к обратному вызову итерацию всех дочерних элементов скрытого div и делать fadeIn() один за другим на них, ничего не работает.

Я тестирую в Google Chrome 26 и IE10.

Спасибо за помощь!

источник

2013-04-15 darethas

Вы уверены, что CSS установлен набор дисплея: никто и не видимость: скрытый? Если он установлен на видимость: скрыто, это не сработает – Kenneth

Можете ли вы разместить свой CSS? Я сделал копию с голыми костями и, похоже, работает так, как ожидалось. http://jsfiddle.net/daCrosby/wXdN5/ – DACrosby

Является ли 'hidden' классом? Если это так, вам может потребоваться инициировать удаление класса. У меня есть конфликты с опытом, где способ скрытия элемента класса (например, Opacity: 0, display: none) может переопределить метод jquery.show или jquery.fade. – user1167442

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

Причиной этого является bootstrap CSS ищет класс .hidden, чтобы добавить правила CSS видимости во внутренние divs, но метод JQuery show() не удаляет скрытый класс. Он управляет CSS, оставляя скрытый класс на месте.

Вы можете использовать removeClass('hidden'), чтобы исправить эту проблему.

Теперь вопрос о бонусе: как мы анимируем, что переход ???

И ответ: fadeIn().removeClass('hidden'); Не очень интуитивно, но эй, это работает :)

источник

2013-07-29 23:57:46 dbrin

Попробуйте

$("#start_game").click(function() { 
    $(this).fadeOut(); 
    $(".input-append").fadeIn("slow").removeClass('hidden'); 
});

источник

2017-11-21 13:18:48

jQuery анимации: fadeIn() скрытый div, не отображающий контент

ответ

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