Jqueryスライドアニメーション

私はスライドアニメーションでdivを非表示にして表示しようとしています。次のように私のコードは次のとおりです。

<style> 
    div.bigBox 
      { 
      background-color:white; 
      width:100px; 
      height:125px; 
      overflow:hidden; 
      } 
      div.try{ 
      background-color:green; 
      width:100px; 
      height:125px; 
      float: left; 
      } 
      div.try2{ 
      background-color:yellow; 
      width:100px; 
      height:125px; 
      } 
    } 
    </style> 
    <script language="JavaScript" src="js/jquery-1.6.1.js"></script> 
    <script src="http://ui.jquery.com/latest/ui/jquery.effects.core.js"></script> 
    <script src="http://ui.jquery.com/latest/ui/jquery.effects.slide.js"></script> 
</head> 
<body> 
    <div class="bigBox"> 
      <div class="try"> 
       <p id="haha">CLICK THIS</p> 
       <p>This is a demonstration of jQuery SimpleDialog.</p> 
      </div> 
      <div class="try2"> 
       <h3 id="test2">CLICK THIS</h3> 
       <p>This is a demonstration of jQuery SimpleDialog.</p> 
      </div> 
    </div> 
<script> 
    $('#haha').click(function() { 
     alert("test"); 
     $('.try').hide("slide", { direction: "left" }, 1000); 
     $('.try2').show("slide", { direction: "right" }, 1000); 
    }); 
</script>

問題は別の箱の推移です。非常にスムーズに流れません。私は非表示にすると同時に（隠されているボックスを尾行するように）表示します。助けてください。ありがとう

出典

2011-11-14 newbie

あなたはスタイルを閉じる直前に余分な終わりの中括弧を持っていますタグ。関連：ここでは、それを刺す人のためのフィドル（jQ 1.7 jQのUIに簡単にアクセスするため）です：http://jsfiddle.net/GregP/CV7fd/ –

あり、皮膚へのダース方法はこの猫は、おそらくですが、ここで私がやったことだ：

はbigBox位置を与えた：彼らは上のスタックように、絶対：
相対位置を使用しようボックスを変更他のトップへ
try（try2ではなく）が上にとどまるようにHTMLの順序を変更しました。
削除したオーバーフロー：bigBoxで非表示にして背景を透明にしましたが、正直なところ違いはありません。
CSSを自分のスタイルに合わせて変更しました。申し訳ありませんが、それは

半OCDのことだフィドル：http://jsfiddle.net/GregP/CV7fd/1/

私は念入りに私の理論をテストしていないが、私はそれはそれはあなたの問題を引き起こしていた浮いていたと思います。

ここでは「.tryの順と.try2ボックスを切り替える」マークアップや（手付かずである）はJavaScriptを示したが、ないポイントが更新CSSません

：

div.bigBox { 
    background-color:transparent; 
    width:100px; 
    height:125px; 
    position: relative; 
} 

.try, .try2{ 
    width:100px; 
    height:125px; 
    position: absolute; 
} 

.try { 
    background-color:green; 
} 

.try2{ 
    background-color:yellow; 
}

（撮影、きた可能性がありああ、あなたがポイントを得る、私は賢明である必要はありません！）

出典

2011-11-14 03:39:16

（またFWIW、私はフェイディングもきれいに見えたと思った：http://jsfiddle.net/GregP/CV7fd/2/） –

私はCSSのオーバーフローを使用することができますスライダーのコードを持っていますか？上記の私のコードの機能は2つの可動ボックスに限られているからです。 Tnx – newbie

オーバーフロー：隠された私は必要な変更はありませんでした。私はちょうどテストしたが、それは良いかどうかは問題ありません。テストするのは簡単でした...ちょうどフィドルを訪問！ –

1つのdivに2つの要素（部分的に表示される）があり、マージン、パディングを変更してスライドさせるか、実装すると考えましたか？

出典

2011-11-14 02:56:42 Shomz

私のコードは単一のdiv .. "bigBox"と私は部分的にそれを非表示にします。 – newbie

okもう1つ（ラッパーとコンテナ）が必要ですが、これらのCSSルールを追加して何が起こるか見てみてください：margin-left：-100px;幅：200px;私のアイデアは、ページ上の他の要素と連携する場合、これら2つの値をアニメートすることでした。 – Shomz

Jqueryスライドアニメーション

答えて

関連する問題