jQuery mobileは折りたたみ可能なセットにアニメーションを追加します

Question

折りたたみ可能なセットにアニメーションを追加したいと思います。jQuery Mobile

<div id="tiles" data-role="collapsible-set" data-iconpos="right"> 
    <div class="tile" data-role="collapsible" data-iconpos="right">blablabla</div> 
    <div class="tile" data-role="collapsible" data-iconpos="right">blablabla</div> 
    <div class="tile" data-role="collapsible" data-iconpos="right">blablabla</div> 
</div> 

jQueryのモバイル完全にこれを処理し、私の3つの項目の折りたたみ可能なセットを示しています 私はこの単純な例をお見せしましょう。私が望むのはアニメーションですが、私はドキュメントで何も見つけられないようです。

私は（heightプロパティをアニメーション）CSSアニメーションがどのように動作するか、シンプルでテストしていませんが、しかし、いくつかの内部フラグを回すようにそれを行うためのjQueryのモバイル方法はありますか？

EDIT シンプルなjQueryアニメーションメソッドをテストして実際に動作します。誰かがこれを必要とする場合に備えて。デフォルトのブラウザで528MHzのAndroid携帯端末でもスムーズに動作します。私が追加したスニペットは本当に簡単です：

ここ

$(".ui-collapsible-heading").live("click", function(event, ui) { 
    $(this).next().css('height', '0').animate({ 
     height: '100px' 
    }); 
}); 

Answer 1

屋に行く：

$('[data-role="collapsible"]').bind('expand collapse', function (event) { 
    $(this).find('p').slideToggle(500); 
    return false; 
});​ 

私はあなたが私はそれを少しいじっためつもりだったアイデアが好きでした。これは、jQuery Mobileが折りたたみ可能なウィジェットを制御するようにフックしているので、ヘッディング要素にバインドするのが少し面倒です。

return false;はデフォルト動作を停止し、他の行はjQuery slideUp/slideDownのアニメーションを使用してコンテンツの表示/非表示を切り替えます。また、.fadeToggle()を使用するか、独自のアニメーションをロールすることもできます。 event.typeにチェックを入れると、発生したイベントに基づいてアニメートできます。ここで

はデモです：http://jsfiddle.net/VtVFB/

Answer 2

コードは完全に右ではありません。 拡張崩壊イベントのデフォルトのjqueryモバイル実装である を上書きしますが、展開崩壊アイコンの変更は処理しません。

良いコードは次のようになります。

$('[data-role="collapsible"] h3:first').bind('click', function (event) { 
    $(this).next('p').slideToggle(500); 
    return false; 
});​ 

Answer 3

1.4 jQueryのモバイルで、最大あなたの代わりにexpandとcollapseのcollapsibleexpandとcollapsiblecollapseイベントにバインドする必要があることに注意してください。だから、折りたたみ可能なカーソルを変更doesntのことのために完全なコードは、偽のため、戻りの

$('[data-role="collapsible"]').on('collapsibleexpand collapsiblecollapse', function(event) { 
    $(this).find('p').slideToggle(500); 
    return false; 
}); 

Answer 4

受け入れ答えdoesntのアカウントとなり、これが私の答えの作業です：

私のプロジェクトでは、それはへの相対的な内容でした[date-role="collapsible"]は$(this).find('>*:not(h3)')

/* animate collapsible-set */ 
$('[data-role="collapsible"]').on('expand', function (event) { 
    $(this).find('>*:not(h3)').each(function() { 
     if (!$(this).is(':visible')) { 
      $(this).stop().slideToggle(); 
     } 
    }); 
}).on('collapse', function (event) { 
    $(this).find('>*:not(h3)').each(function() { 
     if ($(this).is(':visible')) { 
      $(this).stop().slideToggle(); 
     } 
    }); 
});