Question

更新：我刚刚意识到代码在safari / chrome中按预期工作，只是没有firefox（25.0）

使用可以水平滑动的面板制作幻灯片。

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

$('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/

将面板设置为新位置的动画，而不是它已经存在的位置。基本上它把面板放到它试图动画（）它时跳到的那一点。我假设有某种屏幕偏移发生我不明白。

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

Answer 1

如果我告诉你的话......

你不需要当前的pos？

$('#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/

jquery animate（）不从FIREFOX中的当前位置开始

1 个答案: