Javascript jQuery动画不适用于左属性

我正在尝试使用jqueryanimate将徽标（

元素）从屏幕外部飞到适当的位置。再一次，它不起作用

这是我的javascript（相关部分在

fly（）

方法中）

当我将logo'

left

设置为0时，它们确实是我想要它们去的地方。所以问题在于jqueryanimate

如果有人能帮我解决这个问题，你也许可以让我不必完全放弃jQuery，而改用angular.js。

所以下面的代码：

$(logo).delay(300).animate({'left':'0px'}, 300, function () {
  if (index < logoFlyer.numberOfLogos) {
    logoFlyer.fly(index + 1);
  }
});

$（logo）.delay（300）.动画（{'left'：'0px'}，300，函数（）{
if（索引

这里有趣的部分是

$（logo）

，我假设它被当作

$（'logo_1'）或$（'logo_2'）等处理。

。因此，现在只有

相对/绝对位置
元素可以设置动画

因此，您可以检查此元素是否具有相对/绝对位置。
已经有了解决方案，但此解决方案没有jQuery（仅CSS3！）

HTML

<ul>
    <li class='logo'>
        --- Image 1 ---
    </li>
   <li class='logo'>
        --- Image 1 ---
   </li>
   <li class='logo'>
       --- Image 1 ---
   </li>
   <li class='logo'>
        --- Image 1 ---        
   </li>

JS

.logo {
list-style: none;
text-align: center;

/** To the left by default **/
-webkit-transform: translate(-100%);
-moz-transform: translate(-100%);
-o-transform: translate(-100%);
-ms-transform: translate(-100%);
transform: translate(-100%);

/** Translate Animation --> 0.3s ease effect **/
-webkit-transition: all 0.3s ease;
-moz-transition: all 0.3s ease;
-o-transition: all 0.3s ease;
-ms-transition: all 0.3s ease;
transition: all 0.3s ease;
}

 .logo.show {
-webkit-transform: translate(0%);
-moz-transform: translate(0%);
-o-transform: translate(0%);
-ms-transform: translate(0%);
 transform: translate(0%); 
 }

var logoFlyer = {
numberOfLogos : 0,

init: function () {
    logoFlyer.numberOfLogos = $('.logo').length;
     setTimeout(function() {
        logoFlyer.fly(0);
    }, 300);
},

fly: function (index) {
    // No need to add indexes
    logo = $(".logo")[index];

    $(logo).addClass("show");
    setTimeout(function() {
        logoFlyer.fly(index + 1);
    }, 300);
  }
} 

$(function () {
    logoFlyer.init();
});

 你会考虑只使用CSS3作为动画吗？我可以帮你，但是没有任何jquery.animateSure，如果你能让图像一个一个地飞进去，你会发布你的相对标记吗？这确实是个问题。非常感谢。不客气@Marcprins很高兴这是一个帮助。
.logo {
list-style: none;
text-align: center;

/** To the left by default **/
-webkit-transform: translate(-100%);
-moz-transform: translate(-100%);
-o-transform: translate(-100%);
-ms-transform: translate(-100%);
transform: translate(-100%);

/** Translate Animation --> 0.3s ease effect **/
-webkit-transition: all 0.3s ease;
-moz-transition: all 0.3s ease;
-o-transition: all 0.3s ease;
-ms-transition: all 0.3s ease;
transition: all 0.3s ease;
}

 .logo.show {
-webkit-transform: translate(0%);
-moz-transform: translate(0%);
-o-transform: translate(0%);
-ms-transform: translate(0%);
 transform: translate(0%); 
 }

var logoFlyer = {
numberOfLogos : 0,

init: function () {
    logoFlyer.numberOfLogos = $('.logo').length;
     setTimeout(function() {
        logoFlyer.fly(0);
    }, 300);
},

fly: function (index) {
    // No need to add indexes
    logo = $(".logo")[index];

    $(logo).addClass("show");
    setTimeout(function() {
        logoFlyer.fly(index + 1);
    }, 300);
  }
} 

$(function () {
    logoFlyer.init();
});