Отне ми известно време да проследя моите границибяха изчезнали и разбрах, че това е бъг / черта на jquery. Тук основният опростен случай показва моя проблем. Имам две вложени вкусове. Аз оживявам размера на външната част, а вътрешната граница на div се скрива по време на анимацията.
<html>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.5.1/jquery.min.js"></script>
<style>
#a {
position: absolute;
top:50px;
left: 100px;
width: 88px;
height: 144px;
}
#b {
width: 100%;
height: 100%;
background: yellow;
border: 5px solid blue;
}
</style>
<h1>go</h1>
<div id="a">
<div id="b"></div>
</div>
<script>
$(function() {
$("h1").click(function() {
$("#a").animate({width:300},2000);
});
});
</script>
</html>
Когато натиснете "Go", половината от синята граница получаваскрити по време на анимацията. Това ли е характеристика на jquery? Или бъг? Има ли начин да се направи тази работа, без да се премества стил на границата върху външната част?
---- UPDATE ---- FWIW има грешка, подадена в jquery за това: http://bugs.jquery.com/ticket/8515
Отговори:
1 за отговор № 1Добавяне на jQuery overflow: hidden по време на анимацията, за да сте сигурни, че ширината е спазена.
Границата на вътрешния ви елемент прелиства външния елемент, така че преливането го кара да се подстригва.
Най-простото решение е да добавите .css("overflow", "visible") след анимацията.