在使用jquery设置其他css之前设置css

Question

我想用jquery添加一个css过渡:

object.css({ 'transition': 'margin 1000ms linear' });

我想在添加过渡之前设置左边框，这样我就可以把它动画到另一个位置。

object.css({
    "margin-left": 700,
});
object.css({
    "transition": "margin 1000ms linear",
    "margin-left": 0,
});

遗憾的是这不起作用。对象保持在0px -left margin

如何做到这一点?

Answer 1

也许这个解决方案会奏效;它利用CSS关键帧动画。这是我知道如何在不使用超时或其他库的情况下做到这一点的唯一方法。另一个解决方案可能是使用jQuery。如果可以的话，过境;它就像jQuery。动画，除了它利用CSS动画代替。它还为jQuery.css()添加了一些方便的CSS3参数。

http://jsfiddle.net/9xw6V/

CSS

.element {
    width: 100px;
    height: 100px;
    background-color: #ff9933;
}
.animate {
    -webkit-animation: slide 5s; /* Safari 4+ */
    -moz-animation:    slide 5s; /* Fx 5+ */
    -o-animation:      slide 5s; /* Opera 12+ */
    animation:         slide 5s; /* IE 10+ */
}
@-webkit-keyframes slide {
  0%   { margin-left: 100px; }
  100% { margin-left: 0px; }
}
@-moz-keyframes slide {
  0%   { margin-left: 100px; }
  100% { margin-left: 0px; }
}
@-o-keyframes slide {
  0%   { margin-left: 100px; }
  100% { margin-left: 0px; }
}
@keyframes slide {
  0%   { margin-left: 100px; }
  100% { margin-left: 0px; }
}

Javascript

$(document).ready(function() {
    var element = $(".element");
    element.click(function() {
       element.addClass("animate");
    }).bind('oanimationend animationend webkitAnimationEnd', function() {
       element.removeClass("animate");
    });
});

Answer 2

这不起作用，因为transition属性是由浏览器获得的在对象被移动到700px然后又回到0px之后。

你可以这样修改你的代码:

object.css({
    "margin-left": 700,
});
setTimeout( function() {
    object.css({
        "transition": "margin 1000ms linear",
        "margin-left": 0,
    });
}, 0);

执行第一个css调用，然后代码结束(在setTimeout调用之后)

浏览器刷新页面，对象变为700px

第二个css调用作为setTimeout的回调执行，transition属性和新位置获得。

JavaScript代码再次结束，浏览器刷新页面，将对象缓慢移动到0px。

查看此提琴:http://jsfiddle.net/6KVNb/

Answer 3

看起来您可以使用css切换transition，但是您需要重新绘制以使更改生效。这很容易用setTimeout()完成，但这会干扰你的对象链接。另一种方法是快速显示/隐藏元素，我在下面使用了这种方法。试试这个jquery扩展方法:

$.fn.cssNow = function(){
   var $t = $(this),
      _args = Array.prototype.slice.call(arguments,0);
   return this.addClass("trans-none")
              .hide(0, function() {
                  $.fn.css.apply($t, _args);
                  $t.hide(0,function(){
                      $t.show().removeClass("trans-none");
                  });
              });    
}

我选择使用一个类而不是直接设置css，但只是为了跳过保存原始定义的步骤。如果你愿意，你可以把这个类去掉，用setProperty()代替(它允许你指定!important)。

.trans-none { 
    transition: none !important;
}

然后你的代码看起来像这样(假设转换设置在对象开始):

object
   .cssNow({"margin-left":"700px"})
   .css({"margin-left":"0px"});

这里有一个小提琴:http://jsfiddle.net/Q9zbc/

Answer 4

用animate()代替。

object.css({
    "margin-left": 700,
});
object.animate({"marginLeft": 0}, 1000, 'linear');

同时，animate()在完成后会收到一个回调，这使得它可以很好地链接动画:

object.animate(
   {"margin-left": 700},
   500,
   'linear',
   function(){
       object.animate({ "margin-left": 0},  1000, 'linear');
    });

http://api.jquery.com/animate/