Question

所以我有一个全屏图像，在页面加载时，是隐藏的。当用户单击链接时，图像将从页面底部滑动显示。当用户然后单击图像时，使用相反的功能从页面上擦除图像。

现在我正在使用slideUp和slideDown。不幸的是，这只是将图像从屏幕上擦除而不会翻译它。我希望图像移出页面，好像它被翻译成2000像素或其他东西。

我尝试使用类似“bottom：+ = 2000”之类的动画和类似的东西，但这会产生相同的“擦拭”结果。

知道如何做到这一点？也许对于宽度/高度可变的图像是不可能的？

这是我的基本代码：

HTML：

<div id="nav_link" class="nav_magazin">
    <p>Magazin</p>
</div>
<div id="magazin_overlay"><div id="mehr_overlay">mehr...</div></div>

CSS：

#magazin_overlay {
    display: none;
    z-index: 50;
    position: fixed;
    bottom: 0px;
    right: 0px;
    width: 100%;
    height: 100%;
    background: url('images/block_cover.jpg') no-repeat center center fixed; 
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
}

Jquery的：

$('.nav_magazin').click(function() {
    $('#magazin_overlay').slideDown('slow');
});

$('#magazin_overlay').click(function(){
    $('#mehr_overlay').hide();
    $(this).slideUp('slow');
});

Answer 1

问题因为，你隐藏了div

而不是这个，

$('#magazin_overlay').click(function(){
    $('#mehr_overlay').hide();
    $(this).slideUp('slow');
});

试试这个，

$('#magazin_overlay').click(function(){
    $(this).slideUp('slow');                  
});

希望这对你有所帮助..... 的 Demo

想要使用Jquery在屏幕上打开/关闭100％宽度和高度的图像

1 个答案: