javascript - 将背景滑入和滑出 View

Question

我有一个按钮，单击后可将背景滑出 View 。我希望显示另一个按钮，单击后会将背景滑回 View 中。

我尝试过使用 animate() 更改背景位置，但无法弄清楚将背景图像完全移入和移出的最佳方法是什么看法。

在下面的代码中，我尽量避免使用“px”作为单位，以确保幻灯片适用于所有屏幕尺寸。

实现此效果的最佳方法是什么？我应该使用 px、vh 还是 %？

$("#slide").click(function() {
    $(".container").delay(100).animate({
      'background-position-y': '600%'
    }, 800, 'linear');

    $(".processHeader").delay(1000).toggle("blind", {
      direction: "up"
    }, 600);

    $(".processContent").delay(2000).toggle("blind", {
      direction: "up"
    }, 600);
});

$(".next").click(function() {
    $(".container").delay(100).animate({
      'background-position-y': '-600%'
    }, 800, 'linear');

    $(".processHeader, .processContent, .step4, .next").delay(200).fadeOut(500);
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

Answer 1

您需要使用 jQuery(window).width() 来确定屏幕尺寸，它是跨浏览器兼容的，并在引用时提取当前屏幕尺寸。

只要窗口未调整大小，这就应该有效。如果您还想在调整大小时隐藏图像，您可以将其嵌套在调整大小事件中:

window.onresize = function(event) {
    ...
};