Как отображение: эффект блока при переходе: непрозрачность?

У меня есть два div. Один отображается, а другой скрыт (с помощью display: none). Когда я нажимаю на первый div, он должен медленно исчезать (сделанный с переходом: непрозрачность), а затем используя setTimeout javascript, я делаю его отображаемым: none и в это время помещаю второй div-дисплей: блокируем и добавляем его класс (который делает его видимым с переходом: непрозрачность). Вопрос в следующем: почему первый div имеет желаемый эффект (медленно исчезает), а второй div сразу же отображается после этого (эффект перехода в этом случае не работает).Как отображение: эффект блока при переходе: непрозрачность?

HTML

<body style="border:1px solid black"> 
    <div class="square red show" ></div> 
    <div class="square blue" style="display:none"></div> 
</body>

Css

.square{ 
    opacity:0; 
    transition: opacity 1s linear; 
} 
.square.show{ 
    opacity:1; 
    transition: opacity 1s linear; 
} 
.red{ 
    background-color:red; 
} 
.blue{ 
    background-color:blue; 
}

$('.red').click(function(){ 
     $(this).removeClass('show'); 
     setTimeout((function(p){return function(){ 
      $(p).css('display', 'none'); 
      $('.blue').css('display', 'block').addClass('show'); 
     }})(this), 1000); 
    });

Пример здесь: http://jsfiddle.net/y7cX2/ Спасибо.

источник

2013-12-22 zhenetta

ли это помогает '$ ('голубые'.) .show (500); ' –

вместо css('display','block') вы должны написать fadeIn(1000) ..

Проверьте решение сейчас:

http://jsfiddle.net/y7cX2/1/

источник

2013-12-22 07:47:00

это демо не работает ..! –

Это работающий помощник! пожалуйста, проверьте его снова –

Это может быть проблема с браузером, поскольку я использую браузер IE8. –

Попробуйте это:

$('.red').click(function(){ 
     $(this).animate({opacity: 0}, 'slow', function(){ 
      $(this).hide(); 
      $('.blue').animate({opacity: 1}, 'slow', function(){ 
        $(this).show(); 
      }); 
     }); 
    });

источник

2013-12-22 07:53:30 HICURIN

Никаких объяснений вообще? – jfriend00

@hicurin, спасибо, я знаю это решение, но это мне не помогает. Основная идея, почему я его не использовал: мне нужно сделать все эффекты максимально возможными css (показывая и скрывая), потому что весь js-код, скорее всего, будет изменен. И мне просто нужно подражать ситуации, что есть красный div, и он исчезает, и на его месте появляется синий div, и это медленно показывается. есть еще один пример jsfiddle.net/y7cX2/6/, и здесь снова отображается синий div. Так может быть, мой вопрос должен состоять в том, как медленно показывать div после того, как он появится в DOM? – zhenetta

Как отображение: эффект блока при переходе: непрозрачность?

ответ

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