jQueryを使用してdivをオフスクリーンでスライドさせる

Question

これは少し難題です。ここでは私が探しているものです：画面上

1. 3のdiv
2. ディビジョン1がちょうど一番左の画面オフ（中心）ページ
3. ディビジョン2が存在するの真ん中に存在する
4. Div 3は右端の画面のすぐ外にあります
5. OnClick、Div 1はDiv 2の位置にスライドします（左側）。Div 2は画面全体をスライドし、Div 3はDiv 3の位置にスライドします（中央、 ）。新しい部署が右に到着します。

私はjQueryアニメーションとAddClassを使ってみました。 jQueryはdivを画面外にスライドさせるのが好きではありません。

どのような考えですか？

私が説明している例については、Groupon.comをご覧ください。私はそれがクールなアイデアだと思って、それを再現するという挑戦を与えました。今のところ、サイコロはありません。

-D

Answer 1

これはなんですか？

http://jsfiddle.net/jtbowden/ykbgT/embedded/result/

http://jsfiddle.net/jtbowden/ykbgT/

これは基本的な機能です。それはより多くのdivs、等に拡大しないが、それはあなたを始めなければならない。

キーは、要素をコンテナにラップしてオーバーフローを隠すことです。

更新：

http://jsfiddle.net/jtbowden/ykbgT/1/

ををさらに簡素化：ここ

はdiv要素の任意の数（1より大きい）を処理わずかに良好なバージョンだ

http://jsfiddle.net/jtbowden/ykbgT/2/

コードスニペット：

$('.box').click(function() { 
 

 
    $(this).animate({ 
 
     left: '-50%' 
 
    }, 500, function() { 
 
     $(this).css('left', '150%'); 
 
     $(this).appendTo('#container'); 
 
    }); 
 

 
    $(this).next().animate({ 
 
     left: '50%' 
 
    }, 500); 
 
});

body { 
 
    padding: 0px;  
 
} 
 

 
#container { 
 
    position: absolute; 
 
    margin: 0px; 
 
    padding: 0px; 
 
    width: 100%; 
 
    height: 100%; 
 
    overflow: hidden; 
 
} 
 

 
.box { 
 
    position: absolute; 
 
    width: 50%; 
 
    height: 300px; 
 
    line-height: 300px; 
 
    font-size: 50px; 
 
    text-align: center; 
 
    border: 2px solid black; 
 
    left: 150%; 
 
    top: 100px; 
 
    margin-left: -25%; 
 
} 
 

 
#box1 { 
 
    background-color: green; 
 
    left: 50%; 
 
} 
 

 
#box2 { 
 
    background-color: yellow; 
 
} 
 

 
#box3 { 
 
    background-color: red; 
 
} 
 

 
#box4 { 
 
    background-color: orange; 
 
} 
 

 
#box5 { 
 
    background-color: blue; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div id="container"> 
 
    
 
    <div id="box1" class="box">Div #1</div> 
 
    <div id="box2" class="box">Div #2</div> 
 
    <div id="box3" class="box">Div #3</div> 
 
    <div id="box4" class="box">Div #4</div> 
 
    <div id="box5" class="box">Div #5</div> 
 
    
 
</div>

Answer 2

たぶん私は誤解。私はあなたが連続して3つのdivを必要としていたが、最後のものだけが滑っていて、それ以外のものは欲しかった。

http://jsfiddle.net/acsfy/

（私はあなたがこのためにjQueryを使っているけど、私は仕事にそれを強制しようとしていたとして、それは私を怒らせた。あなたは、あなたの目的のためにこれを適応する必要があると思います。）

Answer 3

そして...あまりにも遅くない年。あなたが最初のdivで開始したい場合、あなたのCSSはこのように見える必要があります。 ジェフB答えを拡張

 

    #box1 { background-color:#333; } 
    #box2 { background-color:#333; left: -50%; } 
    #box3 { background-color:#333; left: 150%; } 
    #box4 { background-color:#333; left: 150%; } 
    #box5 { background-color:#333; left: 150%; } 

Answer 4

、私はHammer.jsを含み、循環リストを作りました。

$(function() { 
$("#esq").click(function() { 
    console.log("Esquerda !"); 
    var obj = $(".ativo"); 
    $(obj).animate({ 
     left: '-50%' 
    }, 500, function() { 
     $(this).css('left', '+150%'); 
     $(this).appendTo('#container'); 
    }); 
    $(obj).next().animate({ 
     left: '+50%' 
    }, 500, function() { 
     $(this).addClass('ativo'); 
     $(obj).removeClass('ativo'); 
    }); 
}); 

$("#dir").click(function() { 
    console.log("Direita !"); 
    var obj = $(".ativo"); 
    var prox = $(obj).siblings(":last"); 
    $(obj).animate({ 
     left: '+150%' 
    }, 500, function() { 
     $(prox).prependTo('#container'); 
    }); 
    $(prox).css('left', '-50%'); 
    $(prox).animate({ 
     left: '+50%' 
    }, 500, function() { 
     $(this).addClass('ativo'); 
     $(obj).removeClass('ativo'); 
    }); 
}); 

var hammertime = new Hammer(document.getElementById("container")); 
hammertime.get('swipe').set({direction: Hammer.DIRECTION_HORIZONTAL}); 
hammertime.on('swipeleft', function() { 
    $("#esq").trigger("click"); 
}); 
hammertime.on('swiperight', function() { 
    $("#dir").trigger("click"); 
}); 

}）;

例：http://jsfiddle.net/tvLt1r9h/2/