1

そこで、オンライン ツールチップ チュートリアルを作成し、各ツールチップを 7 秒間隔でフェードインおよびフェードアウトするように設定しました。インタラクティブなチュートリアルをオンにするボタンが最初にオンになったときに、すべてのツールチップが画面上で 1 秒間点滅することを除いて、すべてがうまく機能します。これを回避する方法についてのアイデアはありますか?

また、1 つのツールチップがフェードアウトしてから次のツールチップがフェードインするまでの 300 ミリ秒のオーバーラップを追加したいと考えています。それを可能にするためにコードを調整するにはどうすればよいですか?

これが、fadeLoop を制御するための私の Javascript です。

<script src="jquery.js"></script>
<script type="text/javascript">
    $(document).ready(function(){
    fadeLoop()
    function fadeLoop() {

        var counter = 0,
            divs = $('.fader').hide(),
            dur = 300;

        function showDiv() {
            $("div.fader").fadeOut(dur) // hide all divs
                .filter(function(index) {
                    return index == counter % divs.length;
                }) // figure out correct div to show
                .delay(dur) // delay until fadeout is finished
                .fadeIn(dur); // and show it
            counter++;
        }; // function to loop through divs and show correct div
        showDiv(); // show first div    
        return setInterval(function() {
            showDiv(); // show next div
        }, 7 * 1000); // do this every 7 seconds    
    };

    $(function() {
        var interval;

        $("#start").click(function() {
            if (interval == undefined){
                interval = fadeLoop();
                $(this).val("Stop");
            }
            else{
                clearInterval(interval);
                $(this).val("Start");
                interval = undefined;
            }
        });
    });
    });
    </script>

ここに私のHTMLがあります:

<!--#include file="header.asp"-->
<% if Request("interactive") = "on" then %>
<form name="tutorial">

<div class="fader"><div class="arrow-w arrowlocation1" style="font-size:1em;" ></div><div id="tutorial1" class="tutorial createquestion1">Start by creating a title and selecting a folder for your question to be stored in.</div></div>

<div class="fader"><div class="arrow-w arrowlocation2" style="font-size:1em;" ></div>
<div id="tutorial2" class="tutorial createquestion2">Categories are key to your reporting effectiveness, be sure to include categories that relate to this question.</div></div>

<div class="fader"><div class="arrow-w arrowlocation3" style="font-size:1em;" ></div>
<div id="tutorial3" class="tutorial createquestion3">Select your options and/or upload an attachment (file, video or audio).</div></div>

<div class="fader"><div class="quicktiptitle quicktiplocation4">QUICK TIP</div><div class="arrow-n arrowlocation4" style="font-size:1em;" ></div>
<div id="tutorial4" class="quicktip createquestion4">To create questions easier update your question preferences in your account area options.</div></div>

<div class="fader"><div class="arrow-w arrowlocation5" style="font-size:1em;" ></div>
<div id="tutorial5" class="tutorial createquestion5">Your rationale can be used to provide feedback to students on this question and you also can use internal comment to track notes on changes, updates, textbook information and more.</div></div>

<div class="fader"><div class="arrow-e arrowlocation6" style="font-size:1em;" ></div>
<div id="tutorial6" class="tutorial createquestion6">Write your questions, answers and you are ready to go.</div></div>

<div class="fader"><div class="arrow-w arrowlocation7" style="font-size:1em;" ></div>
<div class="quicktiptitle quicktiplocation7">QUICK TIP</div>
<div id="tutorial7" class="quicktip createquestion7"> Click on this icon to open and close sections that you don't use. These will remain closed whenever you visit this page until you open them again.</div></div></form>

何かご意見は？

クリス

4

1 に答える 1

1

jsFiddleで実行すると、正常に動作しているようです。おそらく、$(document).ready()火災までdivが表示されますか？jQuery スクリプトが実行されるまで表示されないように、最初は cssで.fade divを非表示にすることができます。

編集

コメントの後、jsFiddleでこれをテストしましたが、問題を処理しているようです。基本的に、CSS で div を非表示にしてから、関数呼び出しの直前に可視性を可視に設定します。hide()

したがって、CSS では次のようになります。

.fader
{
    visibility:hidden;
}​

次に、スクリプトで次を置き換えます。

divs = $('.fader').hide()

と：

divs = $('.fader').css('visibility','visible').hide()

その後、動作するはずです

于 2012-12-17T15:48:14.790 に答える