자바 스크립트 스크롤 이벤트 변경 CSS 다음 기다렸다가 다시 변경

Question

스크롤 이벤트 CSS를 변경하려고하고 작동하고 있습니다.

$(window).scroll(function() { 
    $(".navcont").css("background-color", "pink") 
}); 

그러나, 나는 지연을 포기하고 다시 변경하려고,

$(window).scroll(function() { 
    $(".navcont").css("background-color", "pink") 
     .delay(5000) 
     .css("background-color", "white"); 
}); 

그것은 항상 핑크 색상을 보여줍니다,하지만 화이트 색상이 먼저 지연 후 핑크 색상 원하는

.

수있는 사람이 도와주세요! 사전에 감사

Answer 1

시도 animate없이 목적으로 만 setTimeout 사용 : jsFiddle에 여기

$(window).scroll(function() { 
    $(".navcont").css("background-color", "pink"); 
    setTimeout(function() {$(".navcont").css("background-color", "white")}, 8000); 
}); 

.

Answer 2

내가 CSS로 복귀 지연 setTimeout를 사용하여 다음 콜백을 얻을 .animate()를 사용하는의 생각 우선 :

$(window).scroll(function(){ 
    $('.navcont').animate({backgroundColor:'pink'},1,function(){ 
     var $this = $(this); 
      setTimeout(function(){ 
       $this.css({backgroundColor:'white'}); 
      },80000); 
    }); 
}); 

1이되는, 애니메이션이 1 밀리 초 긴 의미 눈에 보이지 않지만 콜백을 만족시키는 값을 추가하기 위해 0을 사용하는 데 문제가있었습니다.

Answer 3

delay() 함수는 모든 함수가 아닌 jQuery effects queue에서만 작동합니다. 효과는 fadeIn, slideUp 등입니다. animate()라는 사용자 지정 효과 생성기가 있으며 지연()과 함께 사용할 수 있습니다. 그러나 배경색과 같은 숫자가 아닌 속성에는 애니메이션을 적용 할 수 없습니다. 그래서 여기에 트릭입니다 - 애니메이션에 대한

$(window).scroll(function() { 
    $(".navcont") 
    .animate({dummyProperty: "dummyValue"},1,"linear",function(){ 
     $(this).css("background-color","pink") 
    }) 
    .delay(80000) 
    .animate({dummyProperty: "dummyValue"},1,"linear",function(){ 
     $(this).css("background-color","blue") 
    }); 
}); 

1. 첫 번째 인수는 애니메이션을하고자하는 CSS 속성이다. 배경색은 애니메이션으로 할 수 없으므로 여기서 더미 속성을 사용합니다 (여기서 아무 것도 사용할 수 있지만 아무런 차이가 없습니다).
2. 두 번째 인수는 애니메이션 시간입니다. delay() 함수를 사용하여 실제 지연을 설정하기 때문에 여기서 1 밀리 초만 사용합니다.
3. 세 번째 인수는 여유 값입니다 (이 경우 중요하지 않음).
4. 네 번째 인수는 'this'가 선택된 HTML 요소를 가리키는 콜백 함수입니다. 그래서 우리는 배경색을 바꿉니다.