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

为了避免在单击已经活动/可见元素时出现闪烁，您可以通过使用其ID来禁用此特定元素的淡出。您现在所做的是淡出所有使用类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();
});

jQuery淡入/淡出 - 从所选项

2 个答案: