Question

我有一个按钮和一个div容器，如果它溢出页面我想隐藏。

使用该按钮，我想要从右到左动画，从左到右动作div动作。

类似的东西：

但有些事情是不对的。

html css：

.animate({marginleft: -300px})

和反向

.animate({marginleft: 0px})

以下代码：

<div id="call"></div>
<div id="wrapper-buttons"></div>

<style>
#call{
width:50px;
height:50px;
}
#wrapper-buttons{
float:right;
width: 300px;
height: 200px;
color: red;
margin-right:-300px;
}
</style>

$(function() {

  $("#call").toggle(function() {       
      $('#wrapper-buttons').animate({ left: '0' }, 500);

  }, function() {       
      $('#wrapper-buttons').animate({ left: '-300' }, 500);

  });
});

Answer 1

我已经重新研究过，答案是：

HTML：

<div id="slidemarginleft" class="slide">
  <button>slide it</button>
  <div class="inner" style="margin-left: 0px;">Animate this element's margin-left style property</div>
</div>

Css : 

.slide {
position: relative;
overflow: hidden;
height: 120px;
width: 350px;
margin: 1em 0;
background-color: #ffc;
border: 1px solid #999;
}

.slide .inner {
position: absolute;
left: 0;
bottom: 0;
width: 338px;
height: 36px;
padding: 6px;
background-color: #4c5;
color: #333;
}

.slide button {
margin: .7em 0 0 .7em;
}

jQuery：

$('#slidemarginleft button').click(function() {
    var $marginLefty = $(this).next();
    $marginLefty.animate({
      marginLeft: parseInt($marginLefty.css('marginLeft'),10) == 0 ?
        $marginLefty.outerWidth() :
        0
    });
  });

动画功能和切换按钮

1 个答案: