Question

我一直在和这个摔跤太久了。

问题：当我按下按钮时，我正试图让图像从屏幕上滑落，这已经成功完成，但还不够。有两个问题：

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

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

嗨请参考小提琴。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;
}

使用css和jquery滑动div而不触发滚动条？

1 个答案: