JQuery проблема в IE, Chrome, но не в FF - PullRequest
Новая
       10

JQuery проблема в IE, Chrome, но не в FF

0 голосов
/ 26 сентября 2011

Имея некоторые проблемы с куском кода Jquery, я думаю, что проблема в том, что на FF, когда страница загружается через 2 секунды, она анимирует панели слева на экран вправо. Он выглядит нормально без каких-либо проблем, но в Chrome и IE он возвращается назад и продолжает двигаться дальше.

Вот код - 

<script type="text/javascript" language="javascript">

$(function() {

   // Display div slowly
    $('#one').delay(2000).show('slow');
    $("#one").animate({
        left: '+=159'
    }, 3000);


    $('#two').delay(3000).show('slow');
    $("#two").animate({
        left: '+=159'
    }, 3000);

    $('#three').delay(4000).show('slow');
    $("#three").animate({
        left: '+=159'
    }, 3000);

    $('#four').delay(5000).show('slow');
    $("#four").animate({
        left: '+=159'
    }, 3000);
    });

 </script>

Вот предварительный просмотр страницы - http://www.visrez.com/preview/och-group/

P.S Я не исключаю, что это проблема css ...

Заранее спасибо за любую помощь!

Gearoid

Ответы [ 2 ]

0 голосов
/ 26 сентября 2011

Проблема связана с тем, что Chrome не учитывает положение (относительно родительского смещения), которое div занимает на странице, прежде чем вы начнете ее перемещать. Таким образом, после анимации он имеет значение left: 159px относительно тела. Firefox учитывает исходную позицию и заканчивается на left: 256px.

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

  1. Перед анимацией определите положение относительно родительского смещения и установите атрибуты CSS top и left. Тогда, надеюсь, окончательным значением будет значение, которое вы установили плюс 159px. Что-то вроде: 

    var offset = $("#one").offset();
$("#one").css({"top": offset.top, "left": offset.left});
// animate

  2. Оберните #oneTop и #one и каждую другую пару в div, который равен position: relative. Это установит родителя смещения анимированного div в position: relative div. Таким образом, + 159px относительно того, где div будет в документе.

0 голосов
/ 26 сентября 2011

я подготовил демо с вашим кодом и это работает.

http://jsfiddle.net/AjDLS/2/

У меня нет вашей проблемы, поэтому я думаю, что у вас должны быть другие проблемы с javascript или css, не могли бы вы выложить больше кода?

...