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').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

Ekansh给出的小提琴在第二次点击右边的btn时失败了（原因是对的，我猜是左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这是工作样本。您已将animate方法中的right和left值恢复为关闭div时在port1和port2类中设置的orignal值。这是代码和运行代码段。

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

使用jquery在div中创建幻灯片

3 个答案: