從右側滑入不透明度：0 jquery

Question

很簡單的問題;我怎樣纔能有一個不透明的：0元素從右側滑入視圖（類似於slideDown效果）？

Answer 1

最簡單的就是用JS分配類，並讓CSS爲你做這項工作。
使用一個事件像click會聞起來像：

$("button").on("click", function(){ 
 
    $(".fadedOutLeft").toggleClass("show"); 
 
});

/* demo styles */ 
 

 
#wrapper{ 
 
    position: relative; 
 
    overflow: hidden; 
 
} 
 

 
#box{ 
 
    height: 100px; 
 
    background: #0bf; 
 
} 
 

 

 

 
/* Initial styles */ 
 

 
.fadedOutLeft{ 
 
    opacity: 0; 
 
    transition: 0.6s; 
 
    transform: translateX(100%); /* go fully right */ 
 
} 
 

 
/* jQuery added ".show" styles */ 
 

 
.fadedOutLeft.show{ 
 
    opacity: 1; 
 
    transform: translateX(0%); 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 

 

 

 
<button>Toggle .show</button> 
 

 
<div id="wrapper"> 
 
    <div class="fadedOutLeft" id="box"></div> 
 
</div>