Якорные элементы Jquery переходят на новую строку при скрытии

Question

Я новичок в JQuery (и JavaScript / AJAX в целом) и столкнулся с проблемой со скрытыми элементами.

Когда я использую код ниже, анимация работает, и элемент скрыт, но когда он скрыт, он перемещается на новую строку вместе со всем после нее. Это также происходит с горизонтальным скрытием, но не с непрозрачностью.

Есть ли способ остановить это или я что-то упустил? Ссылки появляются в строке, как это:

Похожие теги: Tag1 Tag2 Tag3

Фрагменты кода:

HTML

<script type="text/javascript" src ="JQuery.js"></script>
<script type="text/javascript" src ="test.js"></script>

<strong>Related Tags: </strong>

<a href=#>Tag1</a>
<a href=#>Tag2</a>
<a href=#>Tag3</a>

JS

$(function() {
     $("a").click(function(event){
        event.preventDefault();
        $(this).animate({height: 'hide' },"Fast");
    });
});

Заранее спасибо,

Dave

Answer 1

Причина, по которой это происходит, в том, что вы анимируете по атрибуту height. Ручная установка высоты подразумевает блочный просмотр, и поэтому вы переходите на новую строку.

Если у вас нет проблем с этим, вы можете переключиться на fadeOut для сокрытия, и это, вероятно, не вызовет ту же ошибку. Иначе, грязный обходной путь должен был бы установить float: left на якорях. Чтобы это было изящное решение, вы должны поместить их в контейнер и clear их (поскольку плавающие объекты не занимают места в родительском объекте, если они не очищены)

<p>
    <a style="float: left;">...</a>
    <a style="float: left;">...</a>
    <a style="float: left;">...</a>
    <div style="clear: both;"></div>
</p>

Answer 2

Проблема в том, что встроенный объект не может иметь высоту, указанную в HTML. Я точно не знаю, что здесь происходит, но, похоже, jQuery компенсирует это, меняя привязку на элемент уровня блока.

Что касается того, как ее решить, я не уверен на 100%, что это будет работать, но, возможно, если вы укажете стиль «display: inline-block» для своих тегов привязки, это может решить проблему (inline-block позволит они должны иметь рост и вести себя так, как вы ожидаете). Если бы вы сделали их все "display: block; float: left;" Я почти уверен, что это тоже решит проблему.

Answer 3

Подобное смещение, вероятно, превращает его в элемент блока, который помещает его на новую строку, которая будет видна Я бы предложил:

a { float: left; }

Это превращает их всех в блоки, но держит их рядом. Я бы также предложил использовать:

$(this).slideUp();

, а не анимация высоты.