1

私はdivの背景色を表示させてからフラッシュのように消えようとしていますが、今まで成功していません。divをクリックすると、別のdivの背景色にフラッシュ効果を与えようとしています。

これまでのところ、私の jquery の知識は次のコードに行き着きました。

         $("div.first_div").click(function(){
              $("#second_div_ID").fadeIn(30).css("background-color", 'blue')
              .fadeOut(1000).css("background-color", 'blue');
          });   });

しかし、予期しないコンテンツとともに2番目のdiv全体が消えてしまいます。どんな助けでも大歓迎です！ありがとう！

4

3 に答える 3

1

fadein()とを連鎖させましたfadeout():

$("#second_div_ID").fadeIn(30).css("background-color", 'blue').fadeOut(1000).css("background-color", 'blue');

したがって、それらは同期して呼び出される可能性があります。

あなたも探しているかもしれませんanimate()：

もう一方が終了したときに一方が呼び出されるようにするため。これを試して：

var $second_div = $("#second_div_ID");
var oldBGColour = $second_div.css('background-color');

$second_div.animate({'background-color': 'blue'}, 30, function(){
    $(this).animate({background-color: oldBGColour}, 1000);
})

テストされていませんが、上記のようなものが必要になります

于 2010-02-18T10:53:00.393 に答える
0 
<div class="quick-alert">Alert! Watch me before it's too late!</div>

.quick-alert {
   width: 50%;
   margin: 1em 0;
   padding: .5em;
   background: #ffa;
   border: 1px solid #a00;
   color: #a00;
   font-weight: bold;
   display: none;
 }

$(document).ready(function() {
  $('#show-alert').click(function() {
    $('<div class="quick-alert">Alert! Watch me before it\'s too late!</div>')
    .insertAfter( $(this) )
    .fadeIn('slow')
    .animate({opacity: 1.0}, 3000)
    .fadeOut('slow', function() {
      $(this).remove();
    });
  });
});

DIVは表示オブジェクトです。ボタンをクリックすると（ID＃show-alertで）、このメッセージが表示され、3秒後に自動的に消えます。そのcssも添付され、

お役に立てば幸いです。

乾杯！

于 2010-06-19T16:56:34.467 に答える
0

フェードインとフェードアウトを使用する場合、その div の背景だけでなく、すべてのサブ要素を含む要素全体でアウトを使用します。

したがって、背景色を「青」に設定してから、透明に設定する必要があります。2 つの間で、少し遅れて設定することをお勧めします。これは、次のプラグインで実現できます: http://www.evanbot.com/article/jquery-delay-plugin/4

このプラグインを使用することもできます: http://plugins.jquery.com/project/color
これは、jQuery に色のアニメーションを実行する機能を提供します。おそらくこれが必要なものです。

于 2010-02-18T10:54:52.297 に答える