Блог

Главная - Вопросы по программированию - Встроенные привязки блоков перемещаются при изменении размера с помощью jQuery animate()

Встроенные привязки блоков перемещаются при изменении размера с помощью jQuery animate()

#javascript #jquery #html #css

#javascript #jquery #HTML #css

Вопрос:

Итак, у меня есть несколько ссылок, выстроенных с использованием встроенного блока. Когда я навожу курсор на один, я хочу, чтобы он был увеличен. Я делаю это с помощью функции animate() jQuery.

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

Вот что у меня есть:

 .thumbs-wrapper { width: 100%; position: relative; margin: 20px 0 0 0; }
.thumbs { height: 65px; position: absolute; background-color: #A0A0A0;
          top: 0; right: 0; }
.thumbs a { border: 2px solid #02AFEC; cursor: pointer; display: inline-block;
            height: 30px; width: 70px; background-color: #FFFFFF; }


$('.thumbs a').hover(function () {
    $(this).animate({ 'height': '50px', 'width': '80px' }, 'fast');
}, function () {
    $(this).animate({ 'height': '30px', 'width': '70px' }, 'fast');
});


<div class="thumbs-wrapper">
    <div class="thumbs">
        <a>Link 1</a>
        <a>Link 2</a>
        <a>Link 3</a>
    </div>
</div>

Я создал jsFiddle: http://jsfiddle.net/kd9XP/2 /. Хотя анимация, похоже, по какой-то причине не работает.

Ответ №1:

Добавьте vertical-align: top; в CSS для .thumbs a .

http://jsfiddle.net/mblase75/kd9XP/4/

Ответ №2:

Добавить

 vertical-align:top;

для .thumbs набора правил

 .thumbs a { border: 2px solid #02AFEC; cursor: pointer; display: inline-block;
        height: 30px; width: 70px; background-color: #FFFFFF; vertical-align:top}

Ответ №3:

Я добавил float: left; в CSS в вашем примере jsFiddle. Это должно сработать.
PS Я также изменил используемый фреймворк с Mootools на jQuery.