使用 jquery 在 div 中创建幻灯片答案

【问题标题】：Creating a slide in div with jquery使用 jquery 在 div 中创建幻灯片
【发布时间】：2014-10-10 15:20:00
【问题描述】：

我正在尝试创建一个带有 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/

谢谢

【问题讨论】：

标签： javascript jquery html jquery-animate

【解决方案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'});
});

【讨论】：

【解决方案2】：

Demo 这是工作示例。关闭 div 时，您已将 animate 方法中的左右值恢复为 port1 和 port2 类中设置的原始值。这是代码并运行sn-p。

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

【讨论】：

【解决方案3】：

请查看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'});
});

【讨论】：