Эффект jquery .css не работает с Firefox

Question

Эффект jquery .css не работает с Firefox

0

У меня есть горизонтальная скользящая навигационная панель на моем сайте, которая анимируется с помощью функции.css({left:...}).

Здесь jsfiddle: http://jsfiddle.net/rH9Nd/

Здесь сценарий, который я использую:

$(document).ready(function() {
$('.nav').mouseover(function() {
    $('.nav').css({ left: '140px' }, 100);
});
$('header').mouseout(function() { 
    $('.nav').css({ left: '0px' }, 100);
});
});

Он отлично работает на Chrome, но в Firefox только часть div/заголовка nav расширяется, создавая странный эффект перекрытия. Не знаете, как исправить.

Кроме того, в качестве побочного вопроса - в первый раз, когда навигатор скользит, нет анимации. Он скользит отлично после того, как он был открыт один раз, только не в первый раз. Не важно, чтобы исправить, но было бы неплохо иметь решение.

благодаря

user3180105 22 янв. 2014, в 20:32

Источник

Теги:

jquery

css

css3

1 ответ

Ещё вопросы

Joe · Accepted Answer · 2014-01-22T17-45-00.000Z

Здесь используется только CSS-решение:

.nav {
    position: fixed;
    left: 0;
    width: 180px;
    margin-left: -180px;
    height: 100%;
    -webkit-transition: 0.3s all;
    -moz-transition: 0.3s all;
    transition: 0.3s all;
}
.nav:hover{
    margin-left: -40px;
}

Я только что проверил, и он работает в Safari, Chrome и Firefox. Скрипт: http://jsfiddle.net/d9ujp/3/

Да, это работает отлично. Я чувствую себя немного глупо, не думая о чистом решении CSS! Ранее я использовал триггер jquery click, но не смог понять, что он больше не нужен ... Спасибо!