Question

我有一个响应式网站，其标题栏的高度设置不同。在我的javascript中，我将此值更改为固定大小：

$('#header').animate({marginTop: 0, height:80});

但是在我的代码中的另一点，我希望这恢复到原始状态。如何将其设置为默认行为？换句话说，动画删除内联css ...

我试过

$('#header').animate({marginTop: 20, height:'inherit'});

但这不起作用。

原来的CSS是：

#header { margin-top:20px; width:100%; height: 80px; background-color: #000; }
@media only screen and (min-width: 768px) and (max-width: 960px) 
{   
#header{height:100px;}
}
@media only screen and (max-width: 767px) 
{
#header{height:auto; padding-bottom: 1px;}
}

解决方案1失败：

存储高度值：
这是无法做到的，因为许多用户在存储值的时刻和恢复存储值的时刻之间调整窗口大小。

解决方案2失败：

动画为'nothing'，juste为空字符串，失败，Jquery将其解释为0并将高度设置为零像素。

Answer 1

您可以这样使用：

var original = $('#header').css('height');//gets original height

$('#header').animate({marginTop: 0, height:80});

然后还原使用：

$('#header').animate({marginTop: 0, height:original});

Answer 2

考虑到你有像下面这样的HTML

<div class="item">
    <div class="block"></div>
    <div class="info">
           My info
    </div>
</div>

您可以这样做：

jQuery(document).ready(function($) {
    $(".item").mouseleave(function(){
        $(this).find('.info').stop().css('marginTop', '0');
    }).mouseenter(function(){
        $(this).find('.info').animate({ marginTop: '-50px', opacity: 0.5 }, 1000);
    });
});

Demo

Answer 3

您必须将原始值存储在某处。我推荐这个 -

$('#header').data('height', $(this).height()).animate({marginTop: 0, height:80});

然后当你准备还原时 -

var oldHeight = $('#header').data('height');
$('#header').animate({marginTop: 20, height: oldHeight });

编辑 -

你有div的任何其他内联样式吗？

如果没有，您只需使用removeAttr并删除style属性。

Answer 4

尝试没有高度值或留下空值高度：''

在jquery中将高度更改或动画为css默认值

解决方案1失败：

解决方案2失败：

4 个答案: