1

これをどのように説明すればよいかわかりません。ページに次のような div がいくつかあります。

<div id="Content">
    <div id="SubContent" class="LoremIpsum">
        some lorem ipsum text here
    </div>

    <div id="SubContent" class="Shakespeare" style="display:none">
        Macbeth story here
    </div>
</div>

<a href="Javascript:Void(0);" onClick="ChangeStory">Change</a>

そのため、「変更」リンクをクリックすると、LoremIpsum div が上にスライドし、スライドが終了した後、Shakespeare div が下にスライドします。

現在、私は持っています：

function ChangeStory(){
    $('.LoremIpsum').slideUp(); 
$('.Shakespeare').slideDown();
}

イベントが次々に発生するのではなく、同時に発生しています。タイミング遅延を挿入しようとしましたが、うまくいきませんでした。それらを次々に実行する方法についてのアイデアはありますか?

どうもありがとう！

4

1 に答える 1

6

次のように、コールバックを使用でき.slideUp()ます (すべてのアニメーションに含まれています)。

function ChangeStory(){
  $('.LoremIpsum').slideUp(function() {
    $('.Shakespeare').slideDown();
  }); 
}

ここでテストできます。または、他のアニメーションの長さを追加する.delay()だけですが、これは特定の状況でのみ優先されます。

function ChangeStory(){
  $('.LoremIpsum').slideUp();
  $('.Shakespeare').delay(400).slideDown();
}

そのバージョンをここで試してください。

また、ハンドラーを目立たないようにバインドすることも検討してください。たとえば、リンクを次のように変更します。

<a href="#" class="ChangeStory">Change</a>

そしてあなたのJavaScriptをこれに：

$(function() {
  $("a.ChangeStory").click(function (e){
    $('.LoremIpsum').slideUp(function() {
      $('.Shakespeare').slideDown();
    }); 
    e.preventDefault(); //prevent scrolling to top
  });
});

ここでテストできます。

于 2010-11-01T11:04:14.763 に答える