Почему jQuery animate () закрывает мою страницу?

Question

Вот этот сайт под вопросом: http://igs.link -networkonline.com / кампании десантно-страница /

Вы можете видеть, что все блоки работают так, как должны, но когда вы наводите курсор мыши на любую из них, нижняя часть страницы расширяется вниз. Раньше это происходило в div ниже, пока я не использовал position: absolute, чтобы удержать его на месте. Я не могу сделать это с нижней части страницы. Есть идеи?

Я уже пробовал анимировать отрицательные поля и отступы без удачи.

Я знаю, что это не самый эффективный способ сделать это, но я не слишком хорошо знаю jQuery. Мой код:

$(function() {


$(".first").hover(function() {
    $(".first").animate({'height': '287px', 'top': "-270px"});
    $("img.button1").animate({'top': "-235px"});
    $('img.button1').attr('src','<?php bloginfo('template_directory'); ?>/images/downarrow.png');
    $("body").animate({'padding-bottom': '-300px'});
}, function() {
    $(".first").animate({'height': '75px', 'top': "-58px", 'overflow': "hidden"});
    $("img.button1").animate({'top': "-25px"});
    $('img.button1').attr('src','<?php bloginfo('template_directory'); ?>/images/bluebutton.png');
});
   $(".second").hover(function() {
        $(".second").animate({'height': '285px', 'top': "-268px"});
        $("img.button2").animate({'top': "-235px"});
        $('img.button2').attr('src','<?php bloginfo('template_directory'); ?>/images/downarrow.png');
    }, function() {
        $(".second").animate({'height': '75px', 'top': "-58px"});
        $("img.button2").animate({'top': "-25px"});
        $('img.button2').attr('src','<?php bloginfo('template_directory'); ?>/images/bluebutton.png');
    });
    $(".third").hover(function() {
        $(".third").animate({'height': '260px', 'top': "-243px"});
        $("img.button3").animate({'top': "-210px"});
        $('img.button3').attr('src','<?php bloginfo('template_directory'); ?>/images/downarrow.png');
    }, function() {
        $(".third").animate({'height': '75px', 'top': "-58px"});
        $("img.button3").animate({'top': "-25px"});
        $('img.button3').attr('src','<?php bloginfo('template_directory'); ?>/images/bluebutton.png');
    });

});

Answer 1

Когда вы увеличиваете #slidebottom s, вы также увеличиваете #container, что, в свою очередь, переполняет нижнюю часть страницы.Вам необходимо вывести #slidebottom из потока документов (с плавающей или на position:absolute, поэтому, когда они становятся больше, они не приводят к увеличению #container.

Кроме того, идентификаторы должны бытьуникально. У вас не может быть трех элементов на странице с id="slidebottom". При этом вы должны также запустить HTML-код через валидатор . Это также может отлавливать ошибки, которые могут способствовать вашей проблеме.

Answer 2

Дайте вашему #content div немного высоты. Я случайно добавил:

<div id="content" style="height:300px;">

и похоже на работу. Если вы можете создать фиксированный размер, это может быть самым простым решением.

Answer 3

О, я думаю, я понимаю, что там происходит. Он достигает полной высоты, прежде чем его подтягивают. Старайтесь, чтобы он всегда находился на высоте 285 пикселей, и используйте z-index, чтобы поместить его за зеленую область, чтобы скрыть 3 вкладки, чтобы высота страницы больше не изменялась.

Также неплохо бы сократить jQuery, когда вы можете использовать css. Таким образом, вы можете добавить класс для тех стрелок, которые изменяются сверху вниз (например, используйте .img-down для одного изображения и img-up для другого) и заменять их на $ ('img'). RemoveClass (). AddClass ('.img-up'), вы можете сделать еще один шаг и удалить анимации jQuery в пользу анимации ключевых кадров в css (но в вашем случае я считаю, что проблема совместимости с браузером является проблемой)

Поскольку все они имеют одинаковую анимацию, функция будет работать хорошо, скажем,

 $('.first').hover(function(){
   pullUp($(this));
 }) // same goes for .second .third etc.

 var pullUp = function($this) {
    $this.animate({'top': "-270px"});
 }

Убрана часть высоты, так как вы можете заставить эту магию происходить в css

Answer 4

Вы можете использовать отрицательную маржу-вершину вместо отрицательной вершины.Надеюсь, это будет полезно.

Answer 5

Ваш #bottom как-то отталкивается.

Используя margin-top: -148px вместо ввода top: -243px (в случае .third, различные значения для .second и .first), это должно быть исправлено.