-1

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

$(".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);
4

4 回答 4

0

如果没有其余代码，很难给出准确的答案，但我建议也使用左边距来为右边设置动画。

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

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

于 2013-10-10T02:22:41.297 回答
0

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/

于 2013-10-10T02:24:12.363 回答
0

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

利用：

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

代替：

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

请参阅此JSFiddle。

于 2013-10-10T02:28:38.997 回答
0

因为代码有些通用，但需要 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/

于 2013-10-10T02:33:25.590 回答