2

linkOne、LinkTwo、linkThreeの3つのリンクがあるメニューがあります。

linkOne：slideToggleをオンにしました。そしてそれは私が望むように動作します、私がそれを開くと私がもう一度押すとそれは閉じます、これは私が求めているものです。

$(document).ready(function(){

   $('.linkOne').click(function(e) {
    e.preventDefault();
    $('.linkTwo-content').hide();  
    $('.linkThree-content').hide();  
    $('.linkOne-content').slideToggle(500);      
    return false;  
  });

linkTwo：ここに、このエフェクトでも機能するfadeInを配置します。

$('.linkTwo').click(function(e) {
    e.preventDefault();
    $('.linkThree-content').hide();      
    $('.linkOne-content').hide();      
    $('.linkTwo-content').fadeIn(500);         
    return false;
  });

linkThree：ここではlinkTwoと同じことをしました。

    $('.linkThree').click(function(e) {
    e.preventDefault();
    $('.linkOne-content').hide();      
    $('.linkTwo-content').hide();      
    $('.linkThree-content').fadeIn(500);         
    return false;
  });

});

私がやりたいのは、linkTwoとlinkThreerで使用するエフェクトFadeInをLinkOneに追加して、開くとfadeIn、閉じるとslideToggleでfadeOutするslideToggleになるようにすることです。次に、3つのリンクすべてにこれを実行させ、この効果を持たせたい、slideToggleFadeIn。

コードを変更してほしくないのは、コードで何が起こっているのかを理解したいからです。ですから、もしあなたが助けることができるなら、それに新しいコードを入れるだけではいけません。

これがフィドルですhttp://jsfiddle.net/lamberta/Pkdj5/

4

3 に答える 3

0

冗長性があまりないようにコードを更新します。必要に応じて表示/非表示する各リンクにバインドされた 1 つの関数を使用するのは非常に簡単です。ここから始めました：

http://jsfiddle.net/Pkdj5/2/

.slideToggle.css('opacity' 0).animate({'opacity': 1, 'height', 'show'})同時にフェード/スライド効果を作成するために変更されます。'toggle'1 つだけを使用する場合は、不透明度と高さの値を使用することもできますanimate。

于 2012-12-20T05:55:38.457 に答える
0

これを試してくださいhttp://jsfiddle.net/Pkdj5/11/

JavaScript:

if(!$('.linkOne-content').is(":visible")){
     $('.linkOne-content').fadeIn(500);
     $('.linkOne-content p').slideDown(500);
}
else{
     $('.linkOne-content').fadeOut(500);
     $('.linkOne-content p').slideUp(500);
}

CSS:

p {display: block}
于 2012-12-20T09:42:00.627 に答える