Question

我有从左侧滑动元素的代码。

$(".slide-left")
   .css("margin-left",-$(this).width())
   .delay(400)
   .animate({
       marginLeft:0
 }, 900);

然而，当我从右边尝试时，没有任何反应！这似乎是逻辑代码，我在这里明显缺少什么？

$(".slide-right")
   .css("margin-right",-$(this).width())
   .delay(400)
   .animate({
   marginRight:0
}, 900);

Answer 1

如果没有剩下的代码，很难给出确切的答案，但我建议使用左边的边距来制作右边的动画。

$(".slide-right")
   .css("margin-left",0)
   .delay(400)
   .animate({
   marginLeft:$(this).width()
}, 900);

JS小提琴：http://jsfiddle.net/JBgLc/1/

Answer 2

margin-right仅对.slide-right周围或附近的元素产生影响。基本上，除非你的右边有其他元素，否则你不会看发生了什么。但是，重要的是要注意，这对.slide-right本身，只是周围的元素没有影响。通过查看带有display:inline;的演示：

可以更好地理解这一点

样本： http://jsfiddle.net/dirtyd77/74JtL/

更好的方法是使用right代替margin-right，但是，您还需要使用position：

$(function(){
    $(".slide-right")
   .css("right",$(this).width())
   .delay(400)
   .animate({
   right:0
}, 900);
});

样本： http://jsfiddle.net/dirtyd77/74JtL/2/

Answer 3

使用否定margin-right通常不起作用 - 最好使用肯定的margin-left，因为margin-right仅适用于以下对象：它不会影响位置它所分配的对象。

使用：

.css("margin-left",$(this).width())

而不是：

.css("margin-right",-$(this).width())

请参阅此JSFiddle。

Answer 4

因为代码有点普遍，但是需要CSS动画解决方案，我使用复选框而不是jQuery附加动画。您可以通过在关键帧中向margin-left属性添加负数来更改幻灯片的方向。我只为webkit设置了它，但它可以很容易地扩展到其他浏览器。

CSS：

input[type="checkbox"]:checked + .slide-right{
-webkit-animation-delay:400ms;
-webkit-animation: slider 900ms; 
}

div{
 width:50px;
 height:50px;
 border:1px solid black;
}

@-webkit-keyframes slider{
 100%{margin-left:400px;}
}

http://jsfiddle.net/rfWtD/

从右边滑动（JQuery）

4 个答案: