我有一个按钮,单击后可将背景滑出 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>
最佳答案
您需要使用 jQuery(window).width()
来确定屏幕尺寸,它是跨浏览器兼容的,并在引用时提取当前屏幕尺寸。
只要窗口未调整大小,这就应该有效。如果您还想在调整大小时隐藏图像,您可以将其嵌套在调整大小事件中:
window.onresize = function(event) {
...
};
关于javascript - 将背景滑入和滑出 View ,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/41267935/