0

ナビゲーション矢印を使用してdivをスライドインおよびスライドアウトするページを作成しようとしています。動作しないデモはここで見ることができます：drawmeahouse.com（右側のdivは中央にスライドし、中央は右側の場所のミラーにスライドします。以下同様に、追加されるとdivが追加されます。最終的...）

これは私がこれまでに得た、そして失敗したところです、drawmeahouse.com / index2.html

ご覧のとおり、コンテンツは中央に表示されておらず、ナビゲーション矢印は何も移動していません。私はJQueryにかなり慣れていないので、これをハックしようとしていますが、いくつかの支援が必要です。

4

2 に答える 2

1

クリック時にdivをアニメーション化する必要があります...次のようなものです。

$('.next').click(
     function(){
          $('.shadow').animate({ left: '-=600px' })
     }
)

これにより、クラスのあるすべてshadowのdivが左に移動し、効果的に右のdivがメインビューに表示されます。idは、他の要素でクラスcontentを再利用すると確信しているため、または何かのような別のクラスを使用します。shadow

左のプロパティをアニメートするには、divは絶対である必要があります。

または、コンテナを絶対的に配置して1つのコンテナにすべて入れ、divだけではなくコンテナ全体を移動することもできます。

于 2012-10-19T22:21:27.083 に答える
1 
$(function(){
   $('#nextControl').click(function() {
      $('#mask').animate({
        marginLeft: "-=200px"
      }, "fast");
   });
    $('#prevControl').click(function() {
      $('#mask').animate({
        marginLeft: "+=200px"
      }, "fast");
   });
});

コードを実行する必要がありon render readyますon document ready。これは、他の構文ミスを修正した後にここで実行されます。コンテンツを表示したい場合はvisibility: hidden;、コンテナのCSSからを削除してください。

于 2012-10-19T22:35:48.267 に答える