使用jQuery在div中創建幻燈片

Question

我試圖用2個按鈕創建一個div。 單擊第一個按鈕，另一個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和right設置了錯誤的值。 我只是更改了值，一切正常。

$('#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

請檢查此JSFIDDLE

第二次單擊右btn時，Ekansh給出的小提琴失敗了（我猜原因是對的，左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

演示這里是工作示例。 關閉div時，已將animate方法中的左右值恢復為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>