Похоже, это связано с проблемой, с которой я столкнулся при работе с webkit. Существует ошибка webkit, которая иногда приводит к тому, что родительский элемент возвращается к своему первоначальному размеру после анимации, которая уменьшает ширину элементов. После анимации родительский элемент возвращается к исходному размеру, чтобы вместить его содержимое.
Редактировать: Удалены комментарии о jQueryUI. Не уверен, почему я думал, что вы используете его.
Ошибка обсуждалась здесь , которая детализирует обходной путь.
Я также отправил отчет об ошибке в jQuery.
По сути, вам нужно будет одновременно уменьшить ширину родительского элемента $sub на ту же величину, что и $sub. Так что если ширина $sub равна 100px, то будет отдельный animate(), чтобы уменьшить родительский элемент на 100px.
Я не проверял ничего из этого на вашем примере, но думаю, что это, вероятно, ключ.
Редактировать 2:
Новая версия с использованием divs
CSS:
.title {
list-style: none;
margin: 0;
padding: 0;
float: left;
height: 32px; /* For testing */
font-family: helvetica;
font-size: 18px;
clip: auto; overflow: hidden;
}
.menu {
height: 32px; /* For testing */
clip: auto; overflow: hidden;
float: left;
}
a, a:link, a:hover, a:visited, a:active {
color: black;
text-decoration: none;
padding: 12px;
font-weight: 700;
float: left;
color: #222;
}
.menu a, .menu a:link, .menu a:hover, .menu a:visited, .menu a:active {
color: black;
text-decoration: none;
padding: 12px;
font-weight: normal;
float: left;
}
JavaScript:
// Prevents us from having to check for null.
var $current = $('#someFictionalElement');
var $previous = null;
$(document).ready(function(){
$(".menu").css({width: 0}); // hide submenus by default on load
$(".title").click(
function() {
$previous = $current;
$current = $(this);
var $currentMenu = $current.next();
$previous.next().animate({ width: 0 }, {duration: 1000, queue: false} );
// Make sure that if there's no menu text (like Top Level 1 and 4) that it does not animate.
// This is because of the pixels added for Firefox (see comment below)
if( $currentMenu.width() == 0 && $currentMenu.text() != '' ) {
// Expand the menu but keep it hidden so we can get its width
$currentMenu.css({visibility: 'hidden', width: ''});
// Store the width, and add a few pixels for Firefox
var currentWidth = $currentMenu.width() + 3;
// Make menu visible and set with to 0 in preparation for the animation
$currentMenu.css({visibility: 'visible', width: 0})
.animate({ width: currentWidth }, 1000);
}
});
$(".title a").hover(
function(){$(this).animate ({ opacity: 0.7 }, 200);},
function(){$(this).animate ({ opacity: 1 }, 600);}
);
});
HTML:
<body>
<div id="container">
<div class='title' id='level1'>
<a href="#">Top-level 1</a>
</div>
<div class='menu'></div>
<div class='title' id='level2'>
<a href="#">Top-level 2</a>
</div>
<div class='menu'>
<a href="#">Bottom Level A1</a>
<a href="#">Bottom Level A2</a>
<a href="#">Bottom Level A3</a>
<a href="#">Bottom Level A4</a>
</div>
<div class='title' id='level3'>
<a href="#">Top-level 3</a>
</div>
<div class='menu'>
<a href="#">Bottom Level B1</a>
<a href="#">Bottom Level B2</a>
</div>
<div class='title' id='level4'>
<a href="#">Top-level 4</a>
</div>
<div class='menu'></div>
</div>
</body>