jquery .css() не работает должным образом

Question

Я написал код для эффекта затухания на div в jquery.

$("#trigger").click(function(e){ 
    $("#divid").parent().css("background-color","#D18F8F"); 
    console.log($("#divid").parent().css("background-color")); 
    e.preventDefault(); 
    $('html, body').animate({scrollTop:$("#divid").offset().top},'slow'); 
    $("#divid").parent().css("transition","background-color 2s linear"); 
    $("#divid").parent().css("background-color","transparent"); 
}); 

когда первый раз я нажал на #trigger он работал, как и ожидалось, но в следующий раз я нажал на спусковой крючок он просто не работает. здесь консольный выход rgb(209, 143, 143) в первый раз и rgba(0,0,0,0) для всех следующий раз.

EDIT: здесь fiddle

Answer 1

Чтобы установить цвет фона # D18F18F быстро вы должны удалить переход. В противном случае вам придется подождать 2 секунды, прежде чем #divid получит новый цвет фона.

Добавьте это в первой строке функции .click:

$("#divid").parent().css("transition","none"); 

Answer 2

Добавить JQuery-UI, и вы можете использовать .......

$("#trigger").click(function(e){ 
    $('html, body').animate({scrollTop:$("#divid").offset().top},'slow'); 
    $(".abc").animate({backgroundColor:"#D18F8F"},2000); 
    $(".abc").animate({backgroundColor:"#FFFFFF"}); 
}); 

jsFiddle