2

更新：我刚刚意识到代码在 safari/chrome 中按预期工作，只是不是 firefox (25.0)

我正在制作带有水平滑动面板的幻灯片。

我希望 animate() 到一个相对位置以在当前位置开始，但它会立即将我的元素移动到另一个位置，然后从那里开始动画。

$('section').eq(0).animate({left:'-=500px'},500);

这个 jfiddle http://jsfiddle.net/ySEZe/1/显示了这个问题

我怀疑css应该归咎于（“margin：auto”？）......如果css看起来有点复杂，面板是居中的，垂直和水平，以及对浏览器大小的响应，我终于得到了那部分工作，所以任何CSS更改都不需要破坏它。

section {
  width:100%;
  height:100%;
  background-color: #f00;
  bottom: 0;
  height: 100px;
  width: 180px;
  left: 0;
  margin: auto;
  position: absolute;
  top: 0;
  right: 0;  
  padding:0px;
}

下面是这个问题的另一个角度：

var div1 = $('section').eq(0);
var pos = div1.position();
div1.animate({left:''+pos.left+'px',opacity:'1'},0);

在工作http://jsfiddle.net/AzXW5/3/

这会将面板动画到一个新位置，而不是它已经在的位置。基本上，当我尝试对其进行动画处理时，它会将面板置于其跳转到的位置。我认为发生了某种我不明白的屏幕偏移。

我发现我可以通过动画到 left:0 来回到我的起始位置，而不是尝试存储当前的 pos.left 并返回它。但我的动画仍然有一个难看的跳跃。有谁知道发生了什么事？

4

1 回答 1

0

如果我告诉你...

您不需要当前的位置吗？

$('#first-slide').click(function(){
    var df = 500;
    $(this).animate({left:'-='+df+'px',opacity:'0.0'}, {
        duration: df,
        complete : function(){
            $(this).animate({left:'+='+df+'px',opacity:'1'},df); 
        }
    });
});

但是如果您多次单击它，这两个都会中断，并且不会转到预期的位置。

那么这样的事情呢？

$('.slides section').first().click(function(){
    var df = 500;
    $(this)//get element
    .stop(true,false)//prevent buildup
    .animate({left:'-'+df+'px',opacity:'0'},df)//out
    .delay(0)//pause between animations
    .animate({left:'0px',opacity:'1'},df);//back
});

css

.slides,.slides section{height:100px;width:180px;position:absolute}
.slides{margin:auto;top:0;right:0;bottom:0;left:0}
.slides section{background-color:#f00}

做了一个小提琴：http: //jsfiddle.net/filever10/7mk4n/

于 2013-11-14T13:00:07.147 回答