6


1

display:noneなしでjQuery slideToggle()を使用していますか?

私はjQueryのslideToggle関数を使用して、display:noneではなくCSS位置を使用して非表示にされたパネルを表示または非表示にしようとしています(これは私のパネルの1つのGoogleマップで問題を引き起こすため)。

現時点では、パネルを非表示にして表示しているだけですが、いくつかのアニメーションは便利です。

$('.panel').addClass('hidden');
$('.head > span').addClass('closed');

$('.head').click(function() {
    $(this).next('.panel').toggleClass('hidden');
    $(this).children('span').toggleClass('open');
});

何か案は?

3 Answer


10


slideToggleは、可視性とは別に、問題の要素の高さをアニメーション化します。 パネルを表示/非表示するためにCSSの位置をどの程度正確に使用したかわかりません。 それに基づいて、http://api.jquery.com/animate/1.1.2。[animate]関数を使用して独自のアニメーションを構築する必要があります。 別の簡単な方法は

要素を表示する場合:

  1. 要素を非表示にする(jquery hide()を使用)

  2. クラスを適用して要素を表示します(つまり、 その位置を調整するため)

  3. スライドダウンを適用します

コンテンツを非表示にする場合:

  1. slideUpを適用-コールバック関数を使用してステップ2と3を実行します

  2. クラスを適用して要素を非表示にします(つまり、 外で位置を調整する 窓)

  3. 要素を表示する(jquery show()を使用)

編集:以下にコード例を示します(「隠された」クラスが要素を隠すためにCSSポジショニングを行うと仮定):

function customSlideToggle(e)
{
   var show = e.hasClass('hidden');
   if (show) {
     e.hide();
     e.removeClass('hidden')
     e.slideDown('slow');
   }
   else
   {
     e.slideUp('slow', function() {
        e.addclass('hidden');
        e.show();
     });
   }
}


2


`slideToggle()`は `toggle()`に代わるもので、現在の表示状態に応じて選択したアイテムを表示/非表示にします。

単にアニメーションを機能させようとしているのであれば、クラスについて心配する必要はまったくありません。

だから、あなたが得るものを見るために次を試してください:

$(this).next('.panel').slideToggle();


0


これを試して Pezholio

 $('.head').click(function() {
    $(this).next('.panel').slideToggle('slow', function() {
        $(this).toggleClass('hidden')
    });
    $(this).children('span').slideToggle('slow', function() {
        $(this).toggleClass('open')
    });
});​

さらにいくつかのエフェクト* slideUP、slideDown、slideToggle *を組み合わせることができます。また、イージングプラグインを使用すると、アニメーションにある程度の滑らかさを追加することもできます。

  • 例を示します *

Html

    test one

    test one

    test one

    test one

    test one



show​

ジャバスクリプト

$(document).ready(function() {
    $('span.more').click(function() {
        $('p:eq(0)').slideToggle();
        $(this).hide();
    });
});​

CSS

.text{display:none}

ライブデモ