5

すべての編集の編集:文字通り数か月かけて作業した後、問題は、現在の要素内の要素の一部/すべてがフローティング/絶対配置されている場合に発生するようです。スライドの邪魔になりそうです。

これと同じ問題を抱えている場合は、問題が解決することを願っています。

元の投稿:

とてもシンプルです。複数の要素を持つ複数の div があり、一度に表示されるのはこれらの div の 1 つだけです (残りは非表示になっています)。

ユーザーが「次へ」をクリックすると、現在の div は左にスライドして非表示になり、次の div は右からスライドして表示されます (実際のロジックは問題ではありません)。

これを .slideUp() と .slideDown() で試してみたところ、見事に機能しました。ただし、しようとすると：

$(oldBox).hide("slide", { direction: "right" }, 1000);

うまくいきません。私はすでに JQuery UI をリンクしているので、それは問題ではありません。

どんな助けでも大歓迎です。

編集: JSFiddle へのリンク: http://jsfiddle.net/NFyRW/

EDIT2：JSFiddleの言葉です。ただし、実際のサイトで動作させることができませんでした。JS は別のファイルにあり、各ページのヘッダーにロードされます (すべてのページで同じヘッダー)。

4

3 に答える 3

2

スライドが絶対配置されている場合は、左のプロパティを使用してアニメーション化します。それらが相対的なものである場合は、margin-left の左を切り替えます。

HTML は次のようになります。

<div id="mainContainer">
   <div class="slide"></div>
   <div class="slide"></div>
</div>

#mainContainer {}
.slide {position:absolute;top:0;left:0;}

このようなもの

  • 現在のスライドをフェードアウトする
  • 現在のスライドを左に押し出す
  • 新しいスライドをフェードインする
  • 新しいスライドを右から引き込みます

.

var $oldBox=$('#oldBox');
    $oldBox.animate({
       'left':-$oldBox.outerWidth(true),
       'opacity':0
    },{duration:500,queue:false,
    specialEasing:{'left':'linear','opacity':'linear'}});

    $newBox.animate({
        'left':0,
        'opacity':1
    },{duration:500,queue:false,
    specialEasing:{'left':'linear','opacity':'linear'}});
于 2013-05-10T01:43:10.697 に答える
0

jquery と jquery ui js および css ファイルを含めます。

カスタム js ファイルは必要ありません。次に、以下のコードを使用できます。

$(this).effect( "スライド", "右" ); または $(this).effect('slide', { direction: 'down'}, 500);

于 2014-11-14T07:19:43.857 に答える