Время jQuery fadeOut() и fadein()

У меня простая проблема с jQuery, проверьте это: http://jsfiddle.net/4Q5uQ/

Как затенить () поле после завершения эффекта затухания ()?


javascript jquery jquery-effects
person Fred Collins    schedule 16.10.2011    source источник
comment
Можете ли вы немного пояснить, что вы имеете в виду? Сейчас сначала происходит затухание, а затем затухание. Вы хотите обратить это вспять?   -  person Vincent Ramdhanie    schedule 16.10.2011
comment
@VincentRamdhanie нет. Если вы запустите этот код и нажмете на ссылку 2, вы увидите, что два эффекта перекрываются. Я бы запустил функцию fadeOut(), а когда она будет полностью завершена, вызову функцию fadeIn() на $(".box[data=" + data + "]").   -  person Fred Collins    schedule 16.10.2011

Ответы (2)


arrow_upward
5
arrow_downward

Я думаю, вы хотите две вещи:

  1. Исчезающие <div> должны быть в одном и том же месте, чтобы они не перемещались.
  2. Вы хотите затемнить видимый <div>, а затем добавить другой <div>.

Первое можно сделать, заключив две <div> в относительно позиционированную <div>, а затем абсолютно позиционировав внутренние <div>:

<div class="wrapper">
    <div id="div_1" data="1" class="box">
        test_1
    </div>
    <div id="div_2" data="2" class="box">
        test_2
    </div>
</div>

А также:

div.wrapper {
    position: relative;
}
div.box {
    /* ... */
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
}

Во-вторых, просто добавьте :visible к вашему селектору fadeOut:

$(".box:visible").fadeOut(1000, ...

Обновленная скрипта: http://jsfiddle.net/ambiguous/jAP2b/

person mu is too short    schedule 16.10.2011
comment
Только информация: почему мы должны исправлять div со свойством position css? Я имею в виду, почему второй div не находится в том же месте, что и первый div, если я скрываю первый. - person Fred Collins; 16.10.2011
comment
@Fred: Строго говоря, вам не нужно абсолютное позиционирование с вашей текущей анимацией, добавление :visible убирает правильное <div> до того, как появится следующий. Однако с позиционированием вы можете исчезать и исчезать. в то же время без изменения HTML или CSS. Вам это не нужно, но это не повредит и дает вам немного больше гибкости в том, как вы хотите анимировать вещи. - person mu is too short; 16.10.2011

arrow_upward
1
arrow_downward

Вам может понадобиться следующий код: http://jsfiddle.net/4Q5uQ/5/

$(document).ready(function() {
    $("a").click(function() {
        var fin = $(this).attr('fin');
        var fout = $(this).attr('fout');
        $("#div_" + fout).show();
        $("#div_" + fin).hide();
        $(".box[data=" + fout + "]").fadeOut(4000, function() {
            $(".box[data=" + fin + "]").fadeIn(4000);
        });
    });
});
person Tran Dinh Thoai    schedule 16.10.2011