1

サイドバーに小さなJQueryタブウィジェットがあり、ページが読み込まれるとフェードインし、それ自体とタブの背後にある興味深いコンテンツに注意を促します。

この効果を構築するには、個々のタブが次々にフェードインする可能性があると便利です。

これは可能ですか？もしそうなら、どのように？

4

3 に答える 3

6

これは、タブを選択すると消え、表示されたときに表示されます。

$('.tabs').tabs({
        select: function(event, ui) {
            $(ui.panel).animate({opacity:0.1});
        },
        show: function(event, ui) {
            $(ui.panel).animate({opacity:1.0},1000);
        }
});
于 2012-06-23T02:07:48.430 に答える
1

タブは単なるli要素なので、display:none最初にページを読み込んだときにすべてのタブを設定してから、JQuery Fade（http://jqueryui.com/demos/effect/li ）の効果を使用して各要素を個別にフェードインできますか？

于 2010-07-07T22:15:57.453 に答える
0

私はここで私の問題の議論を見つけました：http：//p.karageorgakis.com/blog/jquery_simulating_a_delay_function_between_fade_in_out_effects/

setTimeout()提案された解決策の中で、少なくとも私の目的のために、javascriptは他の解決策を打ち負かしました。

これが私が使ったコードです：

$(function() {
    $("#tabs").tabs();
    $("#tabs").fadeIn(500);
    $("#li1").fadeIn(500);
    setTimeout('$("#li2").fadeIn(500)', 300);
    setTimeout('$("#li3").fadeIn(500)', 600);
    setTimeout('$("#li4").fadeIn(500)', 900);
});

タブウィジェット自体とリストアイテムはすべてdisplay:none最初に設定されています。

それが私を素晴らしいフェードソリューションに導いたので、私が共有する別の問題がありました。

このウィジェットは、他のコンテンツの左側にフロートする必要がありましたが、JQueryによって完全にインスタンス化されるまで非表示にする必要もありました。;fadeIn()に設定された要素で動作していませんでした。visibility:hiddenでなければなりませんでしたがdisplay:none、これによりウィジェットが周囲のコンテンツを置き換えて突然表示され、非常にひどく見えました。フェードインはそれを軽減する方法でした。

振り返ってみると、タブウィジェットの（既知の）ディメンションをブロックできるかもしれませんが、とにかく得られた結果が気に入っています！

于 2010-07-08T19:59:51.497 に答える