在jQuery中将高度更改或设置为css默认动画

Question

I have a responsive website with different height setting for a header bar. In my javascript at some point, I change this value to a fixed size :

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

But at another point in my code, I would like this to revert to the original state. How can I animate it back to the default behavior? In other words, animating the remove inline css...

I tried

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

but this doesn't work.

The original css is this :

#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;}
}

Failed solution 1:

---

storing the height value:
This cannot be done because a lot of users are resizing their window between the moment where the value would be stored and the moment of restoring the stored value..

Failed solution 2:

---

animating to 'nothing', juste an empty string, fails, Jquery interprets this as 0 and animates the height to zero pixels.

Answer 1

You could use like this:

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

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

Then revert use this:

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

Answer 2

Considering you have HTML like below

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

You can do something like this:

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

You'll have to store the original value somewhere. I recommend this -

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

Then when you are ready to revert -

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

EDIT --

Do you have any other inline styles for the div?

If not, you can simply use removeAttr and remove the style property.

Answer 4

尝试不使用height值，或将空的height值留在此处：''