javascript - jQuery fadeIn/Out-从选定元素中删除动画

我正在使用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/

任何帮助将不胜感激。

最佳答案

仅在内容不可见时才执行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;
}