CSS滑塊：觸發動畫使用JavaScript（使用GreenSock）

Question

我有一個關於這個代碼的問題：

codepen.io/ettrics/pen/WvoRQo

我試圖動畫裏面的內容滑塊與綠色環保（tweenmax）使用JavaScript。
我如何實現這一目標？
謝謝你的努力！

Answer 1

你只是檢查this和also ..

樣品動畫與JavaScript在這裏。

的Html

<div id="overlay"> 
    <a id="close"> close </a> 
    <h1>This is overlay content</h1> 
    Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries 
</div> 
<div class="content"> 
    <a id="open"> open </a> 
    <h2>This is page content</h2> 
    Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries 
</div> 

的CSS

* { 
    margin: 0; 
    padding: 0; 
} 
#overlay { 
    width: 100%; 
    height: 100%; 
    color: #fff; 
    position: fixed; 
    transform: translateY(-100%); 
    background-color: rgba(20,20,20,0.9); 
} 

#open { 
    cursor: pointer; 
    display: inline-block; 
    width: 40px; 
    height: 40px; 
    background-color: #ea5; 
} 
#close { 
    cursor: pointer; 
    display: inline-block; 
    width: 40px; 
    height: 40px; 
    background: #43e; 
} 

jQuery的

//since there's a -100% translateY in the CSS, this just tells GSAP how things should be assigned between regular "y" and yPercent... 
TweenLite.set(overlay, {y:0, yPercent:-100}); 

$('#open').on('click', 
    function() { 
    TweenMax.to(overlay, 0.8, { 
     yPercent: 0 
    }); 
    }); 

$('#close').on('click', 
    function() { 
    TweenMax.to(overlay, 0.8, { 
     yPercent: -100 
    }); 
    });