Разница в анимации между показом и скрытием с помощью jQuery 1.6.3

Question

У меня есть несколько контейнеров со ссылками, например:

<div class="items" id="first"><a href="item1">item 1</a></div>

Контейнеры имеют фоновое изображение, а ссылки скрыты с помощью: display: none;

$(".items").mouseover(function() {
    $("a", this).show(1500);
}).mouseout(function() {
    $("a", this).hide(1500);
});

Живой пример

Теперь проблема в том, что текст отображается медленно, но место, которое занимает, занято сразу.Как достичь противоположности - текст, который должен быть виден немедленно, и его место, которое он занимает, будет отображаться медленно?

Answer 1

Когда ваши <a> скрыты, они не занимают места на экране.Как только они становятся скрытыми, они внезапно занимают место.Вот почему, в вашем живом примере, при наведении курсора вы сразу же видите, что пространство открылось.

Текст переместился из нулевого пространства в полное.Это не сразу видно, потому что непрозрачность начинается с нуля и достигает полной непрозрачности только через 1500 миллисекунд.Тем не менее, даже при нулевой непрозрачности она все еще существует, занимая место.

Так что то, о чем вы спрашиваете, на самом деле невозможно.Вы МОЖЕТЕ сделать свои <a> абсолютно позиционированными, чтобы они никогда не занимали места, а после того, как они полностью исчезают, пространство между вашими графиками расширяется, но я не уверен, что вы к этому стремитесь ...

Answer 2

О странно, я пробовал это в JQuery 1.4.4, и оно работает правильно, но, как показано в вашем jsfiddle, оно ломается в 1.6.3.

Во всяком случае, я догадался, что это потому, что по умолчанию тег a имеет стиль display inline, который не позволяет назначать ширину.

Вы можете установить значение .items a { display:inline-block; }, а затем скрыть их с помощью JQuery:

$(".items a").hide();

http://jsfiddle.net/wtZPQ/3/

Answer 3

http://jsfiddle.net/wtZPQ/2/

Вы также можете захотеть отобразить: блок, чтобы убедиться, что текст не переносится.