animationオプション
ポップオーバー(popover.js)におけるanimationオプションは、フェード・インのアニメーションで表示し、フェード・アウトのアニメーションで非表示にするかどうかを設定するオプション。
属性値一覧表
| 属性値 | 説明 |
|---|---|
| true | フェード・アニメーションで、表示/非表示。 |
| false | フェード・アニメーションなしで、表示/非表示。 |
data-animation属性に指定
ポップオーバーを呼び出す要素に、data-animation属性を追加し、true、falseの何れかを指定する。
サンプル
ソースコード
HTML
<p> <button type="button" class="btn btn-default" data-toggle="popover" data-animation="true" title="ポップオーバーのタイトル" data-content="ポップオーバーの内容。">サンプル・ボタン(true)</button> </p> <p> <button type="button" class="btn btn-default" data-toggle="popover" data-animation="false" title="ポップオーバーのタイトル" data-content="ポップオーバーの内容。">サンプル・ボタン(false)</button> </p>
JavaScript
$(function () {
$('[data-toggle="popover"]').popover();
});
JavaScriptにおいてanimationオプションを指定
サンプル
ソースコード
HTML
<p> <button type="button" id="sample3popover1" class="btn btn-default" title="ポップオーバーのタイトル" data-content="ポップオーバーの内容。">サンプル・ボタン(true)</button> </p> <p> <button type="button" id="sample3popover2" class="btn btn-default" title="ポップオーバーのタイトル" data-content="ポップオーバーの内容。">サンプル・ボタン(false)</button> </p>
JavaScript
$(function () {
$('#sample3popover1').popover(
{
animation: true
}
);
$('#sample3popover2').popover(
{
animation: false
}
);
});