Анимировать абсолютный объект справа: 0 слева: 0 в Chrome

Итак, у меня есть функция jQuery, которая анимирует набор элементов с разной шириной от выравнивания по правому краю родительского div до левого от родительского div. Это плавно работает в Firefox, однако в Chrome анимация «прыгает», а не плавно анимируется на другую сторону. Кто-нибудь знает, как это исправить?

скрипка: http://jsfiddle.net/WM9nQ/

HTML:

     <body> 
      <div id="parent">
       <ul>
         <li><a href="#">link1</a></li>
         <li><a href="#">link2</a></li>
         <li><a href="#">link3</a></li>
         <li><a href="#">link4</a></li>
         <li><a href="#">link5</a></li>
       </ul>
     </div>
</body>

CSS:

body{
width: 500px;  
}

#parent{
position: relative;
width: 100%;
}

#parent ul li{
height: 20px;
width: 100%;
margin: 2px 0px;
list-style: none;
}

#parent a{
    color: #000;
position: absolute;
right: 0;
}

JS:

 $(document).ready(function($){
   $('#parent a').bind('click', function(e) {
            e.preventDefault();
                $('#parent a').animate({
                    left: 0
                    }, 2000);       
                });
});

javascript jquery absolute jquery-animate
person Carl Papworth    schedule 19.02.2014    source источник
comment
не могли бы вы поместить весь этот код в jsfiddle?   -  person Suman Bogati    schedule 19.02.2014
comment
Можете ли вы создать скрипт js?   -  person Jashwant    schedule 19.02.2014
comment
jsfiddle.net/WM9nQ   -  person Carl Papworth    schedule 19.02.2014

Ответы (1)


arrow_upward
1
arrow_downward

Причина, по которой он мгновенно переходит влево, заключается в том, что вы не установили левую позицию элемента, в результате jQuery пытается перейти от вычисленного left:auto к left:0

Чтобы обойти это, вы можете установить левую позицию перед выполнением анимации:

var element = $('#parent li a:eq(0)');

var left = element.position().left;

element.css({ left: left });

element.delay(100).animate({
    left: "0px"
}, 'slow');

http://jsfiddle.net/KQGQr/2/

Или вы можете анимировать, используя правильное положение элемента:

$('#parent a').bind('click', function(e) {
    e.preventDefault();
    var element = $('#parent li a:eq(0)');

    element.delay(100).animate({
        right: $('#parent').width() - element.outerWidth()
    }, 'slow');       
});

http://jsfiddle.net/KQGQr/3/

person Matthew Mcveigh    schedule 19.02.2014
comment
Это прекрасно работает, единственное, что делает небольшой скачок вправо перед выполнением анимации. - person Carl Papworth; 19.02.2014
comment
Еще лучше, поскольку это ряд объектов, расположенных справа:0, они все еще делают небольшой скачок влево: выровнены перед анимацией. Лучше, но не идеально... хм... - person Carl Papworth; 19.02.2014
comment
Я не мог увидеть прыжок, поэтому не уверен, что это поможет, но попробуйте новое обновление. - person Matthew Mcveigh; 19.02.2014
comment
Ах, это потому, что все a-теги имеют одинаковую ширину. Проверьте новую скрипку. jsfiddle.net/KQGQr/4 Теперь анимация заканчивается тем, что элементы ‹a› выровнены по правому краю. , Я хочу, чтобы они анимировались от выравнивания по правому краю до выравнивания по левому краю :) - person Carl Papworth; 19.02.2014
comment
Вот и все! Большое спасибо ^_^ - person Carl Papworth; 19.02.2014