comment faire apparaître et disparaître la couleur de fond div dans jquery?

Question

J'essaie de faire apparaître la couleur de fond d'un div puis de disparaître comme un flash qui va et vient mais sans succès jusqu'à présent. Sur le clic d'un div, j'essaie de donner un effet de flash à la couleur de fond d'un autre div.

Jusqu'à présent, ma connaissance jquery sont venus au code suivant:

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

mais ce qui se passe est toute la seconde div disparaît avec le contenu qui ne devrait pas. Toute aide serait appréciée! Merci!

Answer 1

Vous avez enchaîné votre fadein() et fadeout():

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

ils sont susceptibles d'être appelés syncronously.

Vous aussi peut-être pour la recherche animate():

Pour assurer une est appelée lorsque l'autre a terminé. essayez ceci:

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); 
}) 

Non testé, mais vous voulez quelque chose comme ci-dessus

Answer 2

Lorsque vous utilisez fadeIn et fadeOut vous ne vous contentez pas d'utiliser sur le fond de cette div, mais sur l'élément entier, y compris tous les sous-éléments.

Par conséquent, vous devez définir la couleur d'arrière-plan sur «bleu», puis à l'arrière pour le rendre transparent. Entre les deux, vous pourriez vouloir mettre dans un petit délai. Ceci peut être accompli avec ce plugin: http://www.evanbot.com/article/jquery-delay-plugin/4

Peut-être que vous pouvez également utiliser ce plugin: http://plugins.jquery.com/project/color
Il donne jQuery la possibilité d'effectuer des animations sur les couleurs et peut-être c'est ce que vous avez besoin.

Answer 3

<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 est l'objet d'affichage, une fois que vous cliquez sur le bouton (le numéro d'identification show-alerte) ce msg apparaîtra, et après 3sec disparaissent automatiquement. Son attaché aussi css,

Espoir utile,

Cheers!