JQueryで同じ項目を2回アニメーションする

Question

私は1つのメニューボタンから一定量の画像をアニメートしています。メニューボタンごとにスライドします。次に、画像をクリックすると、より滑り落ちる必要がある別のリンクがあります。これは起こっていない。

ここでjQueryのサイトを見てから

$(document).ready(function() { 
    $("#busoptbio").hide(); 
    $("#current").toggle(function() { 
     $("#busoptbio").show(); 
     $("#busoptbio").animate({ 
      left: '+=348px' 
     }, 1200); 
    }, function() { 
     $("#busoptbiolnk").click(function() { 
      $("#busoptbio").animate({ 
       left: '+=550px' 
      }, 1200); < ------2nd animate not working 
     }); 
    }); 
}); 

本当にありがとうございました、 アンドレア

Answer 1

現在、2つのイベントを1つのリンクにバインドするトグル機能を使用しています。この場合、ID #currentの要素です。これらのイベントは、#currentをクリックしたときにのみ呼び出されます。すでに自分のリスナーであるトグル内のクリックを聞くことはできません。あなたはクリックして「専門家に会う」ときに、第2のアニメーションが起こるしたい場合

だから、あなたは違ったアプローチをする必要があります。このことができます

$(document).ready(function() { 

    $("#busoptbio").hide(); 
    $("#current").click(function(e) { 
     e.preventDefault(); 
     $("#busoptbio").show(); 
     $("#busoptbio").animate({ 
      left: '+=348px' 
     }, 1200); 
    }); 

    $("#busoptbiolnk").click(function() { // When the link is clicked, the rest rolls out 
     $("#busoptbio").animate({ 
      left: '+=550px' 
     }, 1200); 
    }); 
}); 

希望を！

EDIT

youreのつもりhrefを定義したり（HREFでリンクに行く）がトリガされることから、デフォルトのイベントを阻止しないようにどちらか必ず、トリガーとして<a>を使用している場合。私はデフォルトの動作を防止するためのコードを更新しましたが、この前に述べたようにもそれをしない<a>

Answer 2

をだ、アニメーションが正常に動作し、問題はあなたのクリックイベントがdiv要素ではなく、リンク上です。 <a>タグ自体がクリックを受信するように、$("#busoptbiolnk").clickから$("#busoptbiolnk a").clickに移動します。

Chromeでテストしましたが、2番目のリンクではテキストの代わりに色付きのボックスの下をクリックします。

EDIT：ジョーイが言うよう

私はあなたが私の提案を追加したことを確認は、あなたの問題は今トグルです。 「ビジネス最適化サービス」をクリックしてもう一度クリックし、リンクをクリックするとトグルされます。トグルを削除し、イベントなしでバインドするだけです。

$(document).ready(function(){ 

    $("#busoptbio").hide(); 
    $("#current").click(function() { 
    $("#busoptbio").show(); 
    $("#busoptbio").animate({left: '+=340px'}, 1200); 
    return false; 
    }); 
    $("#busoptbiolnk a").click(function(){ 
    $("#busoptbio").animate({left: '+=550px'}, 1200); 
    return false; 
    }); 
}); 

再びEDIT：

あなたのページがアニメーションの再生前にリダイレクトされる、修正する（上記のように）クリックハンドラに虚偽のリターンを追加します。または、＃現在のhrefを "＃"に設定する