I am working on a page where I would like to hide the navigation bar. I ran into a problem only with Safari, in Chrome, FF, Opera, IE7 + there are no problems.
When the rolling animation ends soon in Safari, you will see that some content will briefly move to its original position and then disappear. For some time I have been doing research. It seems like most of the time it fills in or fields, but they are set to zero, and I tried two CSS resets. It seems to me that this is due to floats. I tried playing with Clear, but no luck.
Here is a demo
And the corresponding animation:
$('#btnHide').click(function() {
$("#divNavContent").animate({
width: 'toggle'
}, 1000, function() {
$("#divNavHidden").animate({
width: 'toggle'
}, 500);
});
});
$('#btnShowMenu').click(function() {
$("#divNavHidden").animate({
width: 'toggle'
}, 500, function() {
$("#divNavContent").animate({
width: 'toggle'
}, 1000);
});
});
source
share