fadeIn как функция обратного вызова после fadeOut работает как положено - PullRequest
Новая
       34

fadeIn как функция обратного вызова после fadeOut работает как положено

1 голос
/ 21 марта 2012

В моем HTML # navInnerMapR и # navInnerMapL содержатся в div # navTwo.

Следующий код находится внутри функции.При вызове мне нужна функция для исчезновения любых видимых ссылок в div # navTwo, паузы на секунду, а затем fadeIn # navInnerMapR.

$('div#navTwo a').fadeOut(200, function() {
    $('a#navInnerMapR').delay(100).fadeIn(200);
});

Код затухает в ссылках, но ничего не затухает. Я думал, что они задерживаются только после завершения fadeOut, однако изменение значения задержки на 1000 иногда делает его работоспособным, но оченьбагги.Спасибо

ОБНОВЛЕНИЕ Вот скрипка, показывающая, что скрытая ссылка начинает отображаться до того, как скрыто видимое: http://jsfiddle.net/jamesbrighton/d9QKr/5/

ОБНОВЛЕНИЕ Извинения, мой вопрос не включает в себя полную информацию о том, что мне нужнодостигать.Я упростил его, так как думал, что у меня просто есть некий синтаксис, который можно легко исправить.

div # navTwo на самом деле содержит 3 ссылки.В любой момент (кроме задержки перед запуском анимации) видна только 1 ссылка.Мне нужно иметь возможность вызывать функцию, которая скроет любую из двух других отображаемых ссылок, а затем покажет # navInnerMapR.

Различные события будут вызывать эту функцию, поэтому может быть видна любая из 2 ссылок, которые не являются # navInnerMapR.Спасибо

ОБНОВЛЕНИЕ Я думаю, что эта скрипка иллюстрирует проблему.Я создал 2 div.nav для иллюстрации различных состояний.Я спрятал разные ссылки со встроенным CSS в каждом.JavaScript будет показывать и скрывать ссылки в моем div несколько раз, поэтому один и тот же div будет выглядеть как каждый пример в разное время.

Я создал 2 триггера, чтобы проиллюстрировать, что различные события должны вызывать функцию.Когда вы нажимаете на триггер, вы видите проблему с обоими примерами.Видимые элементы div не скрываются до показа a.one.Спасибо тебе за твое терпение!

http://jsfiddle.net/jamesbrighton/dYvMS/24/

Интересный момент, если я изменю $ ('. Nav a.one'). FadeIn (1000);оповещение срабатывает несколько раз!Не знаю, почему это так!

Ответы [ 2 ]

1 голос
/ 21 марта 2012

Редактировать: Обновленный ответ на основе вашего комментария ниже,

Да, это работает, как мне нужно, но я не уверен, что это будет работать для моей реальной страницы.Извините за мой вопрос недостаточно подробный.Пример кода, который я дал, упрощен.На текущей странице их 3 ссылки в div # navTwo, в любое время будет видна только одна из них.Мне нужно иметь возможность вызывать функцию, которая скрывает любые ссылки и показывает конкретную ссылку, но любая из двух других ссылок в div # navTwo может быть видимой.Спасибо

DEMO

HTML: Добавлен класс для всех ссылок внутри navTwo 

<div id="navTwo">
    <a href="#" id="navInnerMapR" class="links">Right</a>
    <a href="#" id="navInnerMapL" class="links">Left</a>
    <a href="#" id="navInnerMapM" class="links">Middle</a>
    <a href="#" id="navInnerMapU" class="links">Upper</a>
    <a href="#" id="navInnerMapLW" class="links">Lower</a>
</div>

JS: 

$('.links').click(function() {
       showHide($(this));
});

function showHide($this) {    
    $this.fadeOut(1000, function() {
         $('#navTwo a').not($this).delay(1000).fadeIn(1000);
    });
}

Мне кажется, я понял, что вам нужно.Попробуйте ниже DEMO и дайте мне знать, если это то, что вы хотите,

DEMO 

$('#navInnerMapR').click(function() {
       runMeR($(this));
});
$('#navInnerMapL').click(function() {
       runMeL($(this));
});

function runMeR($this) {    
    $this.fadeOut(1000, function() {
         $('a#navInnerMapL').delay(1000).fadeIn(1000);
    });
}
function runMeL($this) {    
    $this.fadeOut(1000, function() {
        $('a#navInnerMapR').delay(1000).fadeIn(1000);
    });
}
0 голосов
/ 21 марта 2012

Как вы сказали, вам нужна функция для исчезновения любых видимых ссылок в div # navTwo, паузы на секунду, а затем fadeIn # navInnerMapR (не других ссылок, только # navInnerMapR). 

$('#navTwo a').click(function(e) {
    $(this).parent().children().each(function(i){
        $(this).fadeOut('slow', function(){
            $('a#navInnerMapR').delay(1000).fadeIn(1000);
        });
    });
});​

Скрипка здесь .

...