Создание проблемного JQuery Switcher на самом деле работает - PullRequest
Новая
       44

Создание проблемного JQuery Switcher на самом деле работает

0 голосов
/ 02 августа 2011

Я пытаюсь научить себя эффектам Jquery, чтобы оживить мои сайты.Я создал учебную страницу, которая выглядит следующим образом: 

<article><a class="front-fire" href="1"></a></article>
<article><a class="front-fire" href="2"></a></article>
<article><a class="front-fire" href="3"></a></article>

<div class="presentation-wrapper">
    <div class="load"></div>
    <div class="presentation"></div>
</div>
<div class="kill></div>

<article><a class="front-fire" href="4"></a></article>
<article><a class="front-fire" href="5"></a></article>
<article><a class="front-fire" href="6"></a></article>

<div class="presentation-wrapper">
    <div class="load"></div>
    <div class="presentation"></div>
</div>
<div class="kill></div>

Цель состоит в том, чтобы, если я щелкну ссылку, она развернется до ближайшего presentation-wrapper, исчезнет, ​​загрузится gif, загрузится содержимое, исчезнетGIF, а затем показывает содержание.При нажатии на другую ссылку она скрывает все открытые presentation-wrapper s, а затем показывает, выполняет ли последовательность открытий заново.Я думаю, что у меня есть представление о том, как связать анимации вместе, но я не могу понять, как циклически проходить классы div s и скрывать те, которые видимы.

Вот мой javascriptво внешнем файле.#primary приложения предназначены для моих целей отладки: 

$(document).ready(function() {     
$('a').click(function(e) {
    e.preventDefault();
    $('#primary').append("pressed");
    var toLoad = $(this).attr('href')+' #post-body';
    var wrap = $(this).parents().filter('article').nextUntil('.kill', '.presentation-wrapper');
    var load = $(wrap).children('.load');
    var pres = $(wrap).children('.presentation');
    var allwraps = $(".presentation-wrapper");

    $(".presentation-wrapper").each(function() {
        if ($(this).is(':visible')) {
            $('#primary').append("6");
            $('.presentation').fadeOut(3000, function() {
                $('#primary').append("7");
                $('.presentation-wrapper').slideUp(3000);
            });         
        }
    });

    switcher();


    function switcher() {       
        $(wrap).slideDown(3000, loadLoader);
        $('#primary').append("1");

        function loadLoader() {
            $(load).fadeIn(3000, loadContent);  
            $('#primary').append("2");
        }

        function loadContent() {
            $(pres).load(toLoad, hideLoader);
            $('#primary').append("3");
        }

        function hideLoader() {
            $(load).fadeOut(3000, showNewContent);
            $('#primary').append("4");
        }

        function showNewContent() {
            $(pres).fadeIn(3000);
            $('#primary').append("5");
        }
    };
  });
});

Я знаю, что это большой вопрос, и, возможно, это не то место, чтобы спрашивать, но я бился головой о стенупытаясь выяснить, что не так.Это работает с первого клика, но .each(), похоже, все испортило!

:: Добавление: возможно, эта деталь поможет.По какой-то причине функция «7» в .each () продолжает срабатывать всякий раз, когда любой из элементов div виден в любое время.Как будто это полицейский, который отрицает все, что происходит после его вызова! ::

1 Ответ

1 голос
/ 02 августа 2011

Я на самом деле не пробовал это, но похоже, что проблема в блоке .each() - когда вы ссылаетесь на $('.presentation') и $('.presentation-wrapper') в операторе if, вы ожидаете, что это только ссылается на текущий .presentation-wrapper и его дочерний .presentation? Потому что на самом деле эти операторы ссылаются на всех элементов на странице, соответствующих этим селекторам. Вот почему бит "7" срабатывает каждый раз.

Я думаю, что это должно сделать это: 

// hide all other presentation wrappers
$(".presentation-wrapper:visible").not(wrap[0]).each(function() {
    $('#primary').append("6");
    var otherwrap = $(this);
    // scope the selector to this element's children
    $('.presentation', otherwrap).fadeOut(3000, function() {
        $('#primary').append("7");
        otherwrap.slideUp(3000);
    }); 
});

Полностью функциональный пример здесь.

Но, на самом деле чище делать это без функции .each(): 

// hide all other presentation wrappers
$(".presentation-wrapper:visible .presentation")
    .not(pres)
    .fadeOut(3000, function() {
        $(this).parent().slideUp(3000);
    });

Кроме того, я понял, что вам понадобится дополнительная логика, если вы пытаетесь загрузить контент в тот же .presentation-wrapper - вы просто хотите сразу скрыть дочерний элемент .presentation в этом случае: 

// hide this immediately if it's currently visible
if (wrap.is(':visible')) {
    pres.hide();   
}

Обновлен jsFiddle здесь.

...