用jquery創建一個幻燈片

Question

我想創建一個帶有2個按鈕的div。點擊第一個按鈕，一個nother div從左側滑入。它有一個按鈕，點擊後可以從屏幕上滑出。主div中的第二個按鈕也一樣。只有當第二個按鈕被點擊時，一個div從右側滑入。再次使用一個使其滑出屏幕的按鈕。

這一切都在jQuery中完成。

誰能告訴我這裏有什麼問題嗎？

的jQuery：

var boxWidth = $("#port2").width(); 

$('#left').on('click',function(){ 
    $('#port1').animate({left:'8'}); 
}); 

$('#right').on('click',function(){ 
    $('#port2').animate({(right:'100%'-boxWidth}); 
}) 

$('#leftC').on('click',function(){ 
    $('#port1').animate({right:'100%'}); 
}); 

$('#rightC').on('click',function(){ 
    $('#port2').animate({left:'100%'}); 
}); 

HTML：

<div id="wrapper"> 
    <div id="port1"> 
     Left text goes here 
     <button id='leftC'>Close 1</button> 
    </div> 
    <div id="port2"> 
     Right text goes here 
     <button id='rightC'>Close</button> 
    </div> 
    <div id="text"> 
     good stuff goes here 
     <br /> 
     <button id='left'>Left</button> 
     <br /> 
     <button id='right'>Right</button> 
    </div> 
</div> 

CSS

#text{ 
    width:500px; 
    height:200px; 
    background-color:red; 
    font-weight:bold; 
    font-size:1.2em; 
    padding:25px; 
} 

#text button{ 
    margin: 20px 0px 10px; 
} 

#port1{ 
    width:500px; 
    height:200px; 
    background-color:green; 
    font-weight:bold; 
    font-size:1.2em; 
    padding:25px; 
    position:absolute; 
    left:-100% 
} 

#port2{ 
    width:500px; 
    height:200px; 
    background-color:yellow; 
    font-weight:bold; 
    font-size:1.2em; 
    padding:25px; 
    position:absolute; 
    right:-100%; 
} 

您可以在這裏的行動看出來： http://jsfiddle.net/belotte/vmu59h87/19/

謝謝

Answer 1

Please look at the fiddle 
[See JsFiddle demo here ][http://jsfiddle.net/vmu59h87/21/] 


    [1]: 

你在這裏做錯了所有你是從你的JavaScript設置左和右的錯誤值。我只是改變了值，一切正常。

$('#left').on('click',function(){ 
    $('#port1').animate({left:'0'}); 
}); 
$('#right').on('click',function(){ 
    $('#port2').animate({right:'-30'}); 
}); 

$('#leftC').on('click',function(){console.log(">>>>>"); 
    $('#port1').animate({left:'-535'}); 
}); 

$('#rightC').on('click',function(){ 
    $('#port2').animate({right:'-535'}); 
}); 

Answer 2

請檢查被點擊第二次正確的BTN當越來越失敗是由Ekansh給出這個JSFIDDLE

的小提琴（原因是右，左CSS衝突我猜）。

$('#left').on('click',function(){ 
    console.log($('#port1').css('left')); 
    $('#port2').removeAttr('style'); 
    $('#port1').animate({left:'8'}); 
}); 

$('#right').on('click',function(){ 
    console.log($('#port2').css('right')+'right'); 
    $('#port2').removeAttr('style'); 
    $('#port2').animate({right:'-39px'}); 
}); 

$('#leftC').on('click',function(){ 
    $('#port1').animate({left:'-532px'}); 
}); 

$('#rightC').on('click',function(){ 
    $('#port2').animate({right:'-529px'}); 
}); 

Answer 3

Demo這是工作示例。在關閉div時，您將動畫方法中的右值和左值恢復爲在port1和port2類中設置的原始值。這裏是代碼和正在運行的代碼片段。

//$('#port1').hide(); 
 
//$('#port2').hide(); 
 

 

 

 
$('#left').on('click', function() { 
 
    $('#port1').animate({ 
 
    left: '8' 
 
    }); 
 
}); 
 

 
$('#right').on('click', function() { 
 
    $('#port2').animate({ 
 
    right: '100' 
 
    }); 
 
}); 
 

 
$('#leftC').on('click', function() { 
 
    $('#port1').animate({ 
 
    left: '-100%' 
 
    }); 
 
}); 
 

 
$('#rightC').on('click', function() { 
 
    $('#port2').animate({ 
 
    right: '-100%' 
 
    }); 
 
}); 
 

 

 
/* 
 
$("#clickme").click(function() { 
 
    $("#book").animate({ 
 
    opacity: 0.25, 
 
    left: "+=50", 
 
    height: "toggle" 
 
    }, 5000, function() { 
 
    // Animation complete. 
 
    }); 
 
}); 
 
*/

#text { 
 
    width: 500px; 
 
    height: 200px; 
 
    background-color: red; 
 
    font-weight: bold; 
 
    font-size: 1.2em; 
 
    padding: 25px; 
 
} 
 
#text button { 
 
    margin: 20px 0px 10px; 
 
} 
 
#port1 { 
 
    width: 500px; 
 
    height: 200px; 
 
    background-color: green; 
 
    font-weight: bold; 
 
    font-size: 1.2em; 
 
    padding: 25px; 
 
    position: absolute; 
 
    left: -100% 
 
} 
 
#port2 { 
 
    width: 500px; 
 
    height: 200px; 
 
    background-color: yellow; 
 
    font-weight: bold; 
 
    font-size: 1.2em; 
 
    padding: 25px; 
 
    position: absolute; 
 
    right: -100%; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script> 
 
<div id="wrapper"> 
 
    <div id="port1"> 
 
    Left text goes here 
 
    <button id='leftC'>Close 1</button> 
 
    </div> 
 
    <div id="port2"> 
 
    Right text goes here 
 
    <button id='rightC'>Close</button> 
 
    </div> 
 
    <div id="text"> 
 
    good stuff goes here 
 
    <br /> 
 
    <button id='left'>Left</button> 
 
    <br /> 
 
    <button id='right'>Right</button> 
 
    </div> 
 
</div>