0

こんにちは私は、クリックやホバーの方法を使わずに、テキストを自動的にフェードインおよびフェードアウトさせようとしています。

フェードインおよびフェードアウトしたいテキストは、ユーザーがクリックしてページ上の別のdivを開いた後にのみ表示されるため、ページ上の読み込み機能を使用できるかどうかわかりません。（私は間違っているかもしれませんか？）

このスクリプトを使用していますが、テキストは静的で何もしていません。誰かが私がどこで間違っているのか教えてもらえますか？ありがとう

<script>
function cycle() {
    $('#morebutton-pics').fadeOut(1000, function() {
        $('#morebutton-pics').fadeIn(1000);
        cycle();
    });
}
$(document).click(function(){
    cycle();
});

</script>
4

3 に答える 3

6

これは、CSS アニメーションとして優れているように思えます。

#morebutton-pics {
  animation: pulse 1s alternate infinite;
  -webkit-animation: pulse 1s alternate infinite;
}
@keyframes pulse {
  from {opacity:1}
  to {opacity:0}
}
@-webkit-keyframes pulse {
  from {opacity:1}
  to {opacity:0}
}

これは、Firefox、Chrome、および IE10 で動作します。これは必要な機能というよりも見栄えがするので、私には受け入れられるように思えます。

于 2012-12-18T15:57:38.800 に答える
2

cycle()CSSがおそらくより良い答えであるにもかかわらず、2番目のアニメーションが終了するのを待たずに繰り返し呼び出すため、コードは機能しません。

function cycle() {
    var $el = $('#morebutton-pics');

    $el.fadeOut(1000, function() {
        $el.fadeIn(1000, cycle);  // loop in the second callback
    });
}
于 2012-12-18T16:01:23.660 に答える
0

交換

$(document).click(function(){
     cycle();
});

と

$(document).ready(function() {cycle(); });

divが非表示の場合は問題ありません

于 2012-12-18T15:57:55.963 に答える