jQuery fade in / out div в другой div?

#jquery

Вопрос:

Возможно ли, чтобы div исчезал, а затем исчезал в том же месте с другим div с другим содержимым при нажатии на ссылку или кнопку?

Очевидно, что он будет использовать функции .fadeIn() and .fadeOut() , но я не уверен, как будет выглядеть весь код, особенно с позиционированием и возможностью делать это дважды на одной странице.

1. Взгляните на api.jquery.com/fadeIn и api.jquery.com/fadeOut

2. Можете ли вы опубликовать какой-либо связанный код?

3. В то же время?? Вы имеете в виду тот же тип?? Я бы перефразировал то, о чем вы просите, на данный момент это очень неясно.

4. Извините за путаницу. Я имел в виду в том же месте. Итак, вы нажимаете кнопку, текущий div исчезает, затем другой div исчезает там, где исчез предыдущий div.

Ответ №1:

Если вы хотите исчезнуть из одного </div> , затем исчезните в другом:

 <div id="div1"></div>
<div id="div2" style="display: none"></div>
<div><a href="#" id="triggerButton">Swap Divs</a></div>

$('#triggerButton').click(function(e){
    e.preventDefault();
    $('#div1').fadeOut('fast', function(){
        $('#div2').fadeIn('fast');
    });
});

Если вы хотите заменить </div> то, что исчезло в том же месте, другим:

 <div id="div1"></div>
<div><a href="#" id="triggerButton">Swap Divs</a></div>

$('#triggerButton').click(function(e){    
    $('#div1').fadeOut('fast', function(){
        $('#div1').replace('<div id="div2"></div>').fadeIn('fast');
    });
});

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

1. Как это срабатывает? И я предполагаю, что в первом примере (что я и хочу, чтобы произошло, когда div исчезает, а затем появляется новый) также потребуется некоторый css, чтобы скрыть div2 его перед отображением?

2. @Charlie Это может быть вызвано практически любым событием в jQuery; Я отредактировал ответ, чтобы отобразить его изменение с помощью события щелчка по тегу привязки. Также добавлено отображение: нет, чтобы скрыть второй div.

Ответ №2:

Вот два поля, которые чередуются друг с другом: http://jsfiddle.net/jfriend00/3XwZv /.

Два блока расположены друг над другом, используя position: absolute в position: relative контейнере.

Один исчезает, другой исчезает, и когда он завершается, они обращают процесс вспять. Код jQuery выглядит следующим образом:

 var fadeinBox = $("#box2");
var fadeoutBox = $("#box1");

function fade() {
    fadeinBox.stop(true, true).fadeIn(2000);
    fadeoutBox.stop(true, true).fadeOut(2000, function() {
        // swap in/out
        var temp = fadeinBox;
        fadeinBox = fadeoutBox;
        fadeoutBox = temp;
        // start over again
        setTimeout(fade, 1000);
    });
}

// start the process
fade();

HTML выглядит так:

 <div id="wrapper">
    <div id="box1" class="box"></div>
    <div id="box2" class="box"></div>
</div>

CSS выглядит так:

 .box {
    position: absolute;
    height: 100px;
    width: 100px;
}

#wrapper {position: relative;}

#box1 {background-color: #F00;}
#box2 {background-color: #00F;  display: none;}

1. Если у вас есть ссылки в каждом из блоков, которые исчезают и исчезают, будут ли ссылки по-прежнему работать?

2. @nicholaschris — будет работать только самая верхняя ссылка, поскольку объекты перекрываются.

Ответ №3:

fadeIn() и fadeOut()

 $("#element1").fadeOut();
$("#element2").fadeIn();