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

Question

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

0

У меня есть два div. Один отображается, а другой скрыт (с помощью display: none). Когда я нажимаю на первый div, он должен медленно исчезать (сделанный с переходом: непрозрачность), а затем используя javascript setTimeout, я делаю его отображаемым: 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;
}

Js

$('.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/ Спасибо.

zhenetta 22 дек. 2013, в 09:38

Источник

0

Помогает ли это $('.blue').show(500);
Krish R 22 дек. 2013, в 07:49

Теги:

javascript

jquery

css

css3

2 ответа

Ещё вопросы

Rahul Patil · Answer 1 · 2013-12-22T06-18-00.000Z

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

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

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

Это работает приятель! пожалуйста, проверьте это снова
Это может быть проблема браузера, так как я использую браузер IE8.

HICURIN · Answer 2 · 2013-12-22T06-08-00.000Z

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

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

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