javascript - 在不触发滚动条的情况下使用 css 和 jquery 将 div 滑出？

Question

我已经为此纠结太久了。

问题:我试图在按下按钮时让图像从屏幕上滑出，我已经成功地做到了，但还不够。有两个问题:

• 我不想隐藏主体上的溢出来隐藏当 div 移出屏幕时触发的水平滚动。
• 当我第二次点击按钮时，我希望 div 从右边滑回原来的位置。我一直无法弄清楚这一点。我知道我可以做到，但是创建另一个 css 类，但我知道必须有更简单的方法。

JSFiddle

CSS:

#abs {
position: absolute; 
height: 200px;
width: 200px;
background-color: grey;
left: 0;
top:0;
transition: transform 3s;
}

.open {
  transform: translateX(1050px);
 }

.hide {
   display: none;
 }

 p {
    text-align: center;
 }

JS:

  $('#clickMe').on('click', function(){
    $('#abs').toggleClass('open');
    if($("#abs").hasClass("open")) { 
        setTimeout(
        function() {
            $("#abs").hide();
        },
        2500);
} else {
    $("#abs").show();
}
})

Answer 1

您好，请引用 fiddle 。 https://jsfiddle.net/cdx7zeo2/1/

我修改了您的代码以使用 jQuery 动画。

$('#clickMe').on('click', function(){
        var right = parseInt($('#abs').css('left'));
    console.log(right);
    if(right === 0){
       $( "#abs" ).animate({
        left:'2500px'
        }, 1500);
    }else{
       $( "#abs" ).animate({
          left:'0px'
      }, 1500);
    }
})

还修改了 id 测试以隐藏 overflow-y，这样你就不需要强硬的 body 溢出属性。注意，这里我们不再使用公开课。

#test {
  position: relative; 
  height: 500px;
  width: 500px;
  background-color: black; 
  overflow-y:hidden;
}