Question

所以我有一个jQuery函数，可以动画一组具有不同宽度的元素，从父div的右边对齐，到父div的左边。这在firefox中工作得很顺利，但是在Chrome中，动画“跳”而不是向其他人动画。有没有人想到解决这个问题？

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);       
                });
});

Answer 1

它立即向左移动的原因是你没有设置元素的左侧位置，因此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/

右侧动画绝对对象：0到左：Chrome中为0

1 个答案: