jquery .css() is not working as expected

Question

i wrote a code for fading effect on a div in 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");
});

when first time i clicked on #trigger it worked as expected, but next time i clicked on trigger it is just not working. here is console output rgb(209, 143, 143) for the first time and rgba(0,0,0,0) for all next time.

EDIT: here is the fiddle

In witch browser are you working?

Alexandru Diacov
– Alexandru Diacov

2013-11-17 20:01:54 +00:00
Commented Nov 17, 2013 at 20:01 — Alexandru Diacov
– Alexandru Diacov, Commented Nov 17, 2013 at 20:01
@AlexandreDiacov Chrome 30

user2897690
– user2897690

2013-11-17 20:02:55 +00:00
Commented Nov 17, 2013 at 20:02 — user2897690
– user2897690, Commented Nov 17, 2013 at 20:02

A. Wolff · Accepted Answer · 2013-11-17 20:09:53Z

2

To set your background color to #D18F18F fast you have to remove the transition. Else wise you would have to wait 2s again before #divid has the new background color.

Add this at the first line of your .click function:

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

edited Nov 17, 2013 at 20:09

A. Wolff

74.4k9 gold badges98 silver badges158 bronze badges

answered Nov 17, 2013 at 20:07

Tom

3,39128 silver badges34 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

user2897690 Over a year ago

but in my problem, i waited for 2 sec and this is not showing again

Tom Over a year ago

@optional optional It requires 2s from the moment you click on the trigger. @ A. Wolff how can you edit my answer? (And how do I insert code the right way, the code block didn't seem to work when I tried it).

animuson · Accepted Answer · 2014-01-27 01:10:10Z

0

Add jQuery-UI and you can use.......

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

jsFiddle

edited Jan 27, 2014 at 1:10

animuson♦

54.9k28 gold badges142 silver badges150 bronze badges

answered Nov 17, 2013 at 20:16

DevlshOne

8,4671 gold badge31 silver badges38 bronze badges

2 Comments

A. Wolff Over a year ago

You should say: <<If you are already using jQuery UI, you can use...>>

DevlshOne Over a year ago

He did not have it added as a library in his fiddle.

Collectives™ on Stack Overflow

jquery .css() is not working as expected

2 Answers 2

2 Comments

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related