Question

我正在尝试使用jQuery动画将徽标（<img>元素）从屏幕外部移动到位。再一次，它没有用。

这是我的javascript（相关部分在fly()方法中。）

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

var logoFlyer = {
  numberOfLogos : 0,

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

  fly: function (index) {
    logo = "#logo_" + index;

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

这是我的css

.logo {
  height: 100px;
  display:inline-block;
  margin-right: 30px;
  overflow:visible;
  border: 1px solid white;
}

.logo img {
  height: 80px;
  left: 1500px;
  position:relative;
}

当我设置徽标时＃39; left为0，它们确实是我希望它们去的地方。所以问题在于jQuery animate

如果有人可以帮助我，你可能会让我完全抛弃jQuery并切换到angular.js。

Answer 1

所以这段代码：

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

这里有趣的部分是$(logo)我假设对待$('#logo_1') or $('#logo_2') etc.。所以现在重点只有position relative/absolute个元素可以动画了。

因此，您可以检查此元素是否具有相对/绝对位置。

Answer 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>

<强> CSS

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

<强> JS

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

Live Demo

jQuery动画不适用于left属性

2 个答案: