Slide 2つの異なるCSS状態を切り替えます

Question

これはスライドダウンに必要なときにはうまくいきますが、私のCSSのために、上になると二重の境界線ができます。だから、私はメインのCSSの上の境界線を取り出してスライドの後に追加しようとしましたが、もし誰かがまだそこにトグルしていたら。どのようにして最初のポジション（上にあるとき）にボーダートップがなく、2番目のポジション（下にあるとき）にボーダートップがあるように、それを作りますか？ここでは、それぞれの国境で2つのCSSクラスを作成することにより、jquery toggleClassを使用することができます私のコード

$('.product').click(function() { 
    $('.info').slideToggle('slow', function() { 
    $('.product').css("border-top","1px solid #000"); 
    }); 
}); 

Answer 1

Demo jsBin

$('.product').toggle(function() { 
    $('.info').stop(1).slideDown('slow'); 
    $(this).css("border-top","1px solid #000"); 
}, function(){ 
    $('.info').stop(1).slideUp('slow'); 
    $(this).css("border-top","1px solid transparent"); 
}); 

を確認することができます私はいくつかのアニメーションキューをクリアするために.stop(1)を使用しました。

Answer 2

です。そして、それらをトグルし、

例

$('.product').click(function() { 
    $('.info').slideToggle('slow', function() { 
    $('.product').toggleClass('addBorder'); 
    }); 
});​ 

を必要とするときは、live example on jsfiddle

Answer 3

まあ、それはjQueryを使って遊ぶのは楽しいです:)

ここで私の小さな実験です：

$('.product').click(function() { 
    if($('.toggled').length > 0){ 
     $('.info').slideToggle('slow', function() { 
     $('.product').css("border-top","none").removeClass('toggled'); 
     }); 
    }else{ 
     $('.info').slideToggle('slow', function() { 
     $('.product').css("border-top","1px solid #000").addClass('toggled'); 
     }); 
    } 
});​ 

http://jsfiddle.net/kaunt/

Answer 4

$('.product').click(function() { 
    $('.info').slideToggle('slow', function() { 
     $('.product').css("border-top","1px solid #000"); 
     if(!$('.info').is(':visible')) $('.product').css("border-top","1px solid transparent"); 
    }); 
}); 

DEMO