jquery에서 div 배경색을 표시하고 사라지게 만드는 방법은 무엇입니까?

Question

div의 배경색을 표시하려고 시도하고 있으며 플래시가오고가는 것처럼 보이지만 지금까지는 성공하지 못했습니다. div를 클릭하면 다른 div의 배경색에 플래시 효과를주기 위해 노력하고 있습니다.

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

을하지만 무슨 일 전체 초 사업부가 예상되지 않는 콘텐츠와 함께 사라집니다 :

지금까지, 내 ​​JQuery와 지식은 다음 코드에왔다. 어떤 도움을 주시면 감사하겠습니다! 감사!

Answer 1

당신은 체인 한 당신의 fadein() 및 fadeout() :

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

는 그래서 그들은 syncronously 호출 할 가능성이 높다.

또한 어쩌면 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); 
}) 

테스트하지,하지만 당신은 단지 DIV의 배경에 있지만, 모든 포함하여 전체 요소에 나가 사용하지 않는 fadeIn 및 페이드 아웃을 사용하는 경우에는 위의

Answer 2

같은 것을 할 것입니다 :이 시도 하위 요소.

따라서 배경색을 '파란색'으로 설정 한 다음 나중에 투명으로 설정해야합니다. 두 사람 사이에 조금 지연 될 수 있습니다. 이것은이 플러그인으로 수행 할 수 있습니다 http://plugins.jquery.com/project/color
그것은 jQuery를에게 색상에 애니메이션을 수행 할 수있는 기능을 제공하고 어쩌면 이것은 당신이 필요로하는 무엇을 : http://www.evanbot.com/article/jquery-delay-plugin/4

은 아마 당신은이 플러그인을 사용할 수 있습니다. 당신이합니다 (ID 번호 쇼 - 경고에 의해) 버튼을 클릭이 MSG가 표시되며, 3 초 후에 자동으로 사라 일단

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는 표시 객체입니다. 그것의 CSS도 부착,

희망 유용

건배!