2

更新: Firefox (25.0) ではなく、Safari/Chrome でコードが期待どおりに機能することに気付きました。

水平にスワイプするパネルでスライドショーを作成しています。

私は 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/

パネルが既にある場所ではなく、新しい位置にアニメーション化されます。基本的には、animate() しようとしたときにジャンプしたポイントにパネルを配置します。私が理解していない何らかの画面オフセットが発生していると思います。

現在の pos.left を保存してそこに戻るのではなく、 left:0 にアニメーション化することで開始位置に戻ることができることがわかりました。しかし、私はまだ私のアニメーションで醜いジャンプをします. 誰が何が起こっているか知っていますか？

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 に答える