クリックすると現在のコンテンツがスライドされ、新しいコンテンツがスライドされます

Question

こんにちは、ありがとうございます。

私はnav barといくつかのDIVを持っています。ボタンをクリックすると、現在のDIVをページの左側と外側にスライドさせ、右側から新しいDIVをスライドさせたいと思います。

[http://www.wix.com/website-template/view/html/1634?originUrl=http%3A%2F%2Fwww.wix.com%2Fwebsite%2Ftemplates%2Fhtml%2Fall%2F13&bookName=&galleryDocIndex=2&category=all][1]

私は、このページでそれを見て、それがどのように行われるか知りたいです。私はjqueryとonClickを使う方法を知っています。左側にアニメートしてフェードアウトしますが、カントはそれを再びクリックする準備ができたホームポジションに戻します。

だから、それを行う方法の例がある場合、またはチュートリアルがある場合は教えてください。ありがとうございました

Answer 1

あなたが提供したサイトで見つかった効果を達成するための多くの方法があります。以下は、JQueryとCSSを使用した実装の1つです。

ここで使用されているJQueryは省略されていないので、関数ロジックは公開されていますが、一度自分に慣れてしまえばコードを短くすることができます。

 

 
//the "slideIn" and "slideOut" classes being added are CSS animations. Please refer to the CSS code. 
 
$('.menu').click(function(){ 
 
\t \t \t $('.current').removeClass('slideIn slideOut').addClass('slideOut').delay(100).removeClass('current'); 
 
}); 
 
    
 
$('.first').click(function(){ 
 
\t \t $('.slide-1').delay(100).addClass('slideIn').fadeIn().delay(200).addClass('current'); 
 
}); 
 

 
$('.second').click(function(){ 
 
\t \t $('.slide-2').delay(100).addClass('slideIn').fadeIn().delay(200).addClass('current'); 
 
}); 
 

 
$('.third').click(function(){ 
 
\t \t $('.slide-3').delay(100).addClass('slideIn').fadeIn().delay(200).addClass('current'); 
 
}); 
 

 
$('.fourth').click(function(){ 
 
\t \t $('.slide-4').delay(100).addClass('slideIn').fadeIn().delay(200).addClass('current'); 
 
});

.menu { 
 
    float:left; 
 
    padding:10px; 
 
    border:1px solid black; 
 
    cursor:pointer; 
 
} 
 

 
.content { 
 
    position:fixed; 
 
    width:80%; 
 
    margin-left:10%; 
 
    background:red; 
 
    height:70px; 
 
    margin-top:100px; 
 
    display:none; 
 
    text-align:center; 
 
    font-weight:bold; 
 
    color:white; 
 
    padding-top:30px; 
 
    transition: all 0.3s ease; 
 
} 
 

 
.slideOut { 
 
    animation: slideOut .7s forwards; 
 
} 
 
.slideIn { 
 
    animation: slideIn 1s forwards; 
 
} 
 

 
@keyframes slideOut { 
 
    0% { 
 
    transform: translateX(0); 
 
    opacity:1; 
 
    } 
 
    80% { 
 
    opacity:0; 
 
    } 
 
    100% { 
 
    transform: translateX(-80%); 
 
opacity:0; 
 
    } 
 
} 
 

 
@keyframes slideIn { 
 
    0% { 
 
    transform: translateX(80%); 
 
    opacity:0; 
 
    } 
 
    100% { 
 
    transform: translateX(0); 
 
    opacity:1; 
 
    } 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script> 
 
<div class="menu first"> 
 
First! 
 
</div> 
 
<div class="menu second"> 
 
Second! 
 
</div> 
 
<div class="menu third"> 
 
Third! 
 
</div> 
 
<div class="menu fourth"> 
 
Fourth! 
 
</div> 
 

 
<div class="content slide-1"> 
 
First Div Here! 
 
</div> 
 
<div class="content slide-2"> 
 
Second Div Here! 
 
</div> 
 
<div class="content slide-3"> 
 
Third Div Here! 
 
</div> 
 
<div class="content slide-4"> 
 
Fourth Div Here! 
 
</div>

この情報がお役に立てば幸い！