用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>