Question

我有一个按钮，一旦点击就会将背景滑出视图。我想制作另一个按钮，一旦点击，就会将背景滑回视图。

我已尝试使用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()来确定与浏览器兼容的屏幕尺寸，并在引用时拉出当前的屏幕尺寸。

只要窗口没有调整大小，这就应该可以工作。如果您还希望在调整大小时隐藏图像，则可以将其嵌套在resize事件中：

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

Answer 2

您应该使用top，bottom，left和right css命令。它们可以以相同的方式进行动画处理，并用作div的参考。例如，为样式top:0;left:0提供div会将其锚定在左上角。

然后，您可以将其动画显示为top:100%;left:100%以隐藏它。

Hiding a background example

将背景滑入和滑出视图

2 个答案: