右から不透明度のスライド：0 jquery

Question

かなり簡単な質問;どのようにして不透明度：0要素を右から見ることができますか（slideDownエフェクトに似ています）？

Answer 1

最も簡単にはJSでクラスを割り当て、CSSがあなたのために仕事をさせることです。

$("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>