javascript - 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

仅当内容尚不可见时才执行淡入/淡出操作。

$(".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;
}