мерцающие анимации jquery

Question

Привет, ребята, я делаю этот сайт здесь: http://craigmarkdrums.com (учитывая, что еще очень рано, так что не судите, да, хе-хе) и посмотрите на меню В Firefox он работает нормально, но в Chrome и Safari вы можете увидеть мерцание в правом углу. я думаю, что происходит, это коробка, меняющая размер. все они в уль. вот мой jquery:

    $(function()
    {
        $('#nav li').hover(function()
        {
            $(this).children().stop(true, true).fadeIn();
            $(this).stop().animate({
                  width: '90px'
            }, 300, 'swing');
            $(this).siblings().stop().animate({
                  width: '42px'
            }, 300, 'swing');
         }, function()
        {
            $(this).children().stop(true, true).fadeOut();
            $(this).stop().animate({
                  width: '50px'
            }, 200);
            $(this).siblings().stop().animate({
                  width: '50px'
            }, 200);
         });
    });

есть идеи, что я делаю неправильно или как я могу улучшить этот код?

ура

Мэтт

Answer 1

Ваша интуиция верна.Чтобы достичь этого эффекта с помощью float, вам нужно будет обработать анимацию самостоятельно и изменить размер всех LI за один шаг, убедившись, что сумма их ширины соответствует содержащему элементу.Или попробуйте использовать абсолютное позиционирование и обрабатывать смещения самостоятельно.

.. Или вы можете обмануть и поместить все это в контейнерный элемент, фон которого был фотографией, которую вы использовали.Таким образом, любое кровотечение будет связано с фотографией, а не с белым фоном.

Answer 2

Я бы предложил перейти к гибкой компоновке коробки для этого (CSS3). Вы можете просто увеличить размер нужной вам коробки, а остальные уменьшатся сами собой.

На этой странице есть много примеров компоновки flex-box (взгляните на второй пример)

Добавьте эту CSS к своим панелям меню:

-moz-box-flex: 1;
-webkit-box-flex: 1;
box-flex: 1;

А затем установите ширину наведенного элемента. Для большей плавности попробуйте добавить несколько небольших задержек перехода, таких как эта (я выделил значения для удобства чтения и понимания):

-moz-transition-property: width;
-moz-transition-duration: 0.2s;
-moz-transition-easing: ease-in-out;
-webkit-transition-property: width;
-webkit-transition-duration: 0.2s;
-webkit-transition-easing: ease-in-out;
transition-property: width;
transition-duration: 0.2s;
transition-easing: ease-in-out;