jQuery fadeIn/Out - удалить анимацию из выбранного элемента

Question

Я использую jQuery и Greensock для создания меню со связанным контентом. Я использую Greensock для запуска начальной анимации, когда пользователь щелкает элемент меню в первый раз. После этого я показываю / скрываю контент с помощью функций jQuery fadeIn/fadeOut. Элементы меню и контент связаны с использованием атрибутов данных.

Вот несколько примеров HTML:

<div class="wrapper">
    <div class="list-outer">
        <ul class="list">
            <li><a href="#" data-content="#content-1">Content 1</a></li>
            <li><a href="#" data-content="#content-2">Content 2</a></li>
        </ul>
    </div>
    <div class="content-outer">
        <div id="content-1" class="content">
            <h2>Content 1</h2>
            <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ullam sapiente quibusdam, voluptates eligendi officiis possimus autem deleniti, in inventore, exercitationem quidem rem facilis veritatis dolores dolore excepturi minus praesentium officia.</p>
        </div>
        <div id="content-2" class="content">
            <h2>Content 2</h2>
            <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Fuga nihil suscipit, ex quisquam possimus. Et at debitis magnam sed, ipsam minima nostrum voluptatibus, omnis suscipit esse recusandae qui quis sequi?</p>
        </div>
    </div>
</div>

JS:

jQuery(document).ready(function ($) {

    // Variables

    var listOuter = $('.list-outer'),
        contentOuter = $('.content-outer'),

        moveList_tl = new TimelineMax({paused: true});  

    // Timelines

    moveList_tl
        .to(listOuter, 0.5, {css:{width: "50%"}})
        .to(contentOuter, 0.5, {css:{alpha: "1"}})
    ;

    // Play animation when click the first menu item

    $(".list li a").one("click", function(e){
        moveList_tl.play();
        e.preventDefault();
    });

    // Fade in/out content after the first click

    $(".list li a").on("click", function(e){
        var thisContent = $(this).data("content");
        $(".content").fadeOut();
        $(thisContent).fadeIn();
        e.preventDefault();
    });

});

Все работает, как и ожидалось, однако, когда я щелкаю пункт меню после первоначального первого щелчка, а затем снова щелкаю этот пункт меню, содержимое снова исчезает / исчезает.

Я бы хотел, чтобы контент оставался на месте, если пользователь снова щелкнет по текущему пункту меню - без какой-либо анимации. Если есть решение, которое катит все в Greensock - даже лучше.

Вот пример ручки, показывающей мое текущее состояние: http://codepen.io/abbasarezoo/pen/YZvEjO/

Любая помощь будет принята с благодарностью.

Answer 1

Делайте fadeIn/fadeOut, только если контент еще не виден.

$(".list li a").on("click", function(e){
    var thisContent = $(this).data("content");
    if(!$(thisContent).is(':visible')) {
        $(".content").fadeOut();
        $(thisContent).fadeIn();
    }
    e.preventDefault();
});

чтобы это работало, вы должны скрыть содержимое при запуске:

.content {
    ...
    display: none;
}

Answer 2

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

Вы по-прежнему будете применять fadeIn(), но это не повлияет на активный элемент, так как он уже виден.

$(".list li a").on("click", function(e){
    var thisContent = $(this).data("content");
    var id = $(thisContent).attr('id');
    $(".content:not(#"+id+")").fadeOut();
    $(thisContent).fadeIn();
    e.preventDefault();
});