0

確かに、これはJavaスクリプトとjQueryを使った初めての経験です。<p> </p>タグを表示し、フェードアウトしてから、別のタグをフェードインしようとしています。フェードアウト部分は問題なく機能しますが、その後、他のタグは表示されません。大きなテキスト領域に対応するためにコンテナの境界線のサイズが変更されているのがわかりますが、テキストは表示されません。22〜23行目は、テキストがフェードインする場所です。jQueryのドキュメントを確認しましたが、理由が見つからないようです。式の前に呼び出しを入れてみました.cssが、フェードインするのではなく、テキストがポップアップするだけです。ネット上のソースからアイデアを得て、ニーズに合わせて変更しようとしました。あなたが今見ているように、私は結局全部を書き直しました。これが私のコードです。

// JavaScript Document
var i = 1;
$(document).ready(function () {
    jQuery.fn.timer = function () {
        var $quote = $('#quote')
        var number = $('#quote').children('p');
        $quote.children('p').eq(i - 1).animate({
            opacity: 0
        }, 1000, function () {
            $quote.children('p').eq(i - 1).css({
                'display': 'none',
                'visibility': 'hidden'
            });
        }).delay(1000);
        i++;
        if (i > number.length) {
            i = 1;
        }
        $quote.children('p').eq(i - 1).animate({
            opacity: 100
        }, 1000, function () {
            $quote.children('p').eq(i - 1).css({
                'display': 'block',
                'visibility': 'visible'
            });
        });
    };
    window.setInterval(function () {
        $('#quote').timer();
    }, 10000);
});

スタイル付きの私のhtmlは次のようになります。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<script type="text/javascript" src="jQuery_V_1.9.1.js"> </script>
<script type="text/javascript" src="quotes_3.js"> </script>
<style>
#quote{
    background: white;
    border: 2px solid #333;
    display: block;
    margin: 0 auto;
    padding: 10px;
    width: 100px;
}

#quote p{
    color: #333;
    display: none;
    font-weight: bold;
    text-align: center;
    display: none;
    visibility: hidden;

}

#quote p:first-child{
    display: block;
    visibility: visible;

}
</style>
</head>

<body>

    <div id="quote">
    <p> Funny stuff happens with Java script </p>
    <p> this is turning out to be more work than I thought it would be!!</p>
    <p> I like Java more!!</p>
    </div>

</body>
</html>

任意のアイデアをいただければ幸いです。私は6時間前に、コンパイルできないものから始めました。同じ効果を得るためにアニメーションGIFを作成できたようです（笑）。

（編集）ようやくテキストを表示できるようになりましたが、フェードイン効果はありませんでした。しかし、コンテナは3つの<p> </p>タグすべてに対応できるように成長しています。どうしてこれなの？

4

4 に答える 4

3

jQueryにはすでに関数がfadeOutありfadeInます。車輪の再発明をする必要はありません。

$(document).ready(function(){

    var quote = "Another quote!";

    $("#quote").text().fadeOut(1000);
    $("#quote").text(quote).fadeIn(1000);

}

アップデート：

アニメーションとフェードの両方を同時に実行したい場合は、次のことを試してください。

$("#quote").animate({ opacity: 1, top: "-10px" }, 'slow');

ただし、これはディスプレイでは機能しないようです。要素はありません（fadeInのように）。したがって、これを事前に設定する必要がある場合があります。

$("#quote").css('display', 'block');
$("#quote").animate({ opacity: 0 }, 0);
于 2013-03-01T21:47:07.673 に答える
2

私はあなたのコードを分解し、あなたが探していると思う効果を生み出すためにそれを最適化しました。これはおそらくあなたが探している機能だと思いますが、あなたの質問はもっと明確にレイアウトできると思います。(1:desired-functionality; 2:current-efforts; 3:quandary-details)

私はあなたのためにこのJSFiddleを作成しました、そしてそれはあなたが探している機能を表すと思います。

希望する効果関数の解釈を再現するために作成したJavaScriptは、すべての引用内容をフェードアウトしてから、「active_quote」をフェードインします。これに応じて、インデックスが設定されます。

$(function(){
    var $quotes=$('#quote>p');
    var quote_lifetime = 3*1000;
    var quote_fadetime = 200;
    //--------
    var active_quote=0;
    var number_of_quote_innards=$quotes.length;
    function displayActiveQuote(){
        $quotes.fadeOut(quote_fadetime); // Fade out all quote contents
        setTimeout(function(){ // After fadeOut'ing everything, we fade in the active quote.
            $( $quotes[active_quote] ).fadeIn(quote_fadetime);
            active_quote++; // incrementing the active_quote, and resetting it to zero if it's exceeded its bounds.
            if (active_quote > number_of_quote_innards-1) active_quote=0;
        },quote_fadetime);
    }
    displayActiveQuote();
    setInterval(displayActiveQuote,quote_lifetime);
});

次に、CSSはこの機能とは関係がなくなったため、CSSを削除しました。この引用符ボックスのスタイルは自由に設定できますが、引用符の間の正確な瞬間に、min-height2つの引用符が表示されるか、引用符が表示されないため、を使用して高さが非常に小さいグリッチを表示できることに注意してください。シングルフレーム。これを解決するには、height代わりに固定を使用することをお勧めします。

//追跡。

編集：jQueryのanimate（）によるフェージングとスライディング

この編集は、スライド機能とフェード機能を同時に実行したいというクレイグの要望に対応しています。

このJSFiddleforYouを更新しました。

JavaScriptを使用して、これに対応するために、他のいくつかのものと一緒に、fadeOut&&fadeInペアを、、animate({opacity:0,height:0},quote_fadetime)およびに変更しました。animate({opacity:1,height:'100%'},quote_fadetime)

（更新されたコード）：

$(function(){
    var $quotes=$('#quote>p');
    var quote_lifetime = 3*1000;
    var quote_fadetime = 800;
    //--------
    var active_quote=0;
    var number_of_quote_innards=$quotes.length;
    function displayActiveQuote(){
        $quotes.animate({opacity:0,height:0},quote_fadetime); // all quotes disappear
        setTimeout(function(){
            $($quotes[active_quote]).animate({opacity:1,height:'100%'},quote_fadetime); // active quote appears
            active_quote++; // here we increment the active_quote, and reset it to zero if it's exceeded its bounds.
            if (active_quote > number_of_quote_innards-1) active_quote=0;
        },quote_fadetime);
    }
    displayActiveQuote();
    setInterval(displayActiveQuote,quote_lifetime);
});

jQuery animateの完了コールバックの代わりにsetTimeoutが使用されていることに注意してください。この場合、アニメーション完了コールバックは、アニメーション化された引用ごとに1回ずつ、3回発生します。アクティブな見積もりをフェードインするために、これを1回だけ実行する必要があります。

そしてこれがCSSです：

#quote {
    width:50%;min-width:210px;
    height:6em; overflow:hidden;
    padding:0.5em 1em; margin:0 auto;
    /*----*/
    border:2px solid #CCC; font-style:italic; 
    color:#555;border-radius:8px; }
    #quote>p {
        opacity:0; height:0; margin:0; }

乾杯、クレイグ！//追跡。

于 2013-03-01T22:20:49.643 に答える
1

これは、はるかに少ないコードを含むアプローチです（デモ）

$(document).ready(function () {
    $("#quote p").each(function(index) {
        $(this).delay(5000*index).fadeIn(300);
    });
});

@aguyfromhereの：Pよりもはるかに少なくはありません

于 2013-03-01T21:51:18.983 に答える
0

display: block; visibility: visible; 不透明度をアニメーション化して100に戻す前に設定する必要があります。そうしないと、非表示の要素の不透明度をアニメーション化することになります。

于 2013-03-01T22:06:19.183 に答える