jQuery淡入/淡出 - 從選定項目中刪除動畫

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; 
} 

Answer 2

爲了避免已經激活/可見元素上點擊時閃爍，可以禁用出的衰落這個特定的元素，通過它的id來定位它。你現在要做的就是淡出與類content的所有元素，你可以改變它淡出，除了已經被點擊的元素的所有元素。

你仍然適用淡入（），但它不會有有源元件產生任何影響，因爲它已經是可見的。

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