用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

喜請參閱小提琴。 https://jsfiddle.net/cdx7zeo2/1/

我修改了您的代碼以使用jQuery animate。

$('#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測試有溢出y隱藏，這樣你就不需要強硬的溢出屬性的身體。請注意，這裏我們不再使用公開課。

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