How do I set css using jQuery .css after a period of time?

jquery css
add css dynamically jquery
change css variable with jquery
dynamically change css file using jquery
jquery animate css
javascript wait 1 second
jquery add css to element by id
jquery change css class

I couldn't figure out How to set time on jQuery .css property I found one answer which is the closest to my question in jQuery change CSS after a certain amount of time

Here is my code:

<script>
    $(document).ready(function(){
        $("#homebutton,#title").click(function(){
            $("#title").css("font-size", "100%");  
            setTimeout(function(){ $("#title").css("font-size", "100%"); },2000)
        });
    });
</script>

I don't know what is wrong with that. It seems like the solution I mentioned above doesn't work for me. Thank you in advance guys

-----------------------------------------EDIT----------------------------------------------

Thanks for the response folks, there are several things that I want to re-explain:

  1. I initially set the font-size to 150% in my CSS, which mean through my jQuery, I expected it to change the font-size into 100%.
  2. I think I've misinterpreted the code, what I wanted to set is the time for decreasing gradually and not the timer

Basically, I want to change the font-size using jquery with transition, and not a sudden change

The trouble is you first set font-size: 100% immediately, then you set it to the same value again after 2 seconds. Ie, you aren't changing the css.

To set the css value when clicked, and then set it to something else 2 seconds later, use different values in each call to .css(). Eg, to decrease the font size by half initially, then bring it back to normal size 2 seconds later:

$(document).ready(function(){
    $("#homebutton,#title").click(function(){
        $("#title").css("font-size", "50%");
        setTimeout(function(){ $("#title").css("font-size", "100%"); },2000);
    });
});

Edit: To gradually decrease the font size, you want to use .animate():

$(document).ready(function(){
    $("#homebutton,#title").click(function(){
        $("#title").animate({ "font-size": "50%" }, 2000);
    });
});

Demo: jsfiddle.net/Y6CrG/

how to add a CSS attribute just for specific time via JQuery (revert , css({"border": "1px solid #ccc"}); });. But the above code will be applied for ever, how can I limit it for a specific period ? share. I have a navigation that, when one of it's nav items is clicked, will use jQuery to change it's z-index to 0. Then, after 2 seconds, I would like the z-index to be changed to 2. I tried using delay() but apparently that doesn't work when changing the CSS.

Change the font-size after the 2 second timeout. For example:

$("#title").click(function(){
  $("#title").css("font-size", "100%");  
  setTimeout(function(){ $("#title").css("font-size", "80%"); },2000)                               
});

I tried it in the following jsfiddle and it worked fine for me. http://jsfiddle.net/kianoshp/z9QeY/

How to Add CSS Properties to an Element Dynamically Using jQuery, You can use the jQuery css() method to add new CSS properties to an element or modify the existing properties values dynamically using jQuery. Let's try out the� Well organized and easy to understand Web building tutorials with lots of examples of how to use HTML, CSS, JavaScript, SQL, PHP, Python, Bootstrap, Java and XML. w3schools .com THE WORLD'S LARGEST WEB DEVELOPER SITE

You can use this:

  $('#title').animate({fontSize : '100%'});

And If you want to set the duration You can use these

  $('#title').animate({fontSize : '100%'}, "slow");
  $('#title').animate({fontSize : '100%'}, "fast");

.animate(), Description: Perform a custom animation of a set of CSS properties. A function to be called after each step of the animation, only once per animated element This object is similar to the one that can be sent to the .css() method, except that the Duration. Durations are given in milliseconds; higher values indicate slower� See "Manipulating CSS pseudo-elements using jQuery (e.g. :before and :after)" for a comprehensive list of techniques. share | improve this answer | follow | edited May 23 '17 at 11:47

CSS transition-duration Property, Numbers followed by -webkit-, -moz- or -o- specify the first version that worked with a prefix. Property. transition-duration, 26.0 4.0 -webkit-, 10.0, 16.0 4.0 -� The .css() method makes it super simple to find and set CSS properties and combined with other methods like .animate(), you can make some cool effects on your site. In its simplest form, the .css() method can set a single CSS property for a particular set of matched elements. You just pass the property and value as strings and the element’s

CSS transition-delay Property, Numbers followed by -webkit-, -moz- or -o- specify the first version that worked with a prefix. Property. transition-delay, 26.0 4.0 -webkit-, 10.0, 16.0 4.0 -� As most of you avid jQuery developers know, as of jQuery 1.4, .css() allows us to pass a function as the property value. This is handy for returning current CSS values to determine changes.

The Best jQuery Examples, After this, add a dot after the parentheses and the method you want to use. In jQuery, the class and ID selectors are like those in CSS. "One" list item--and then uses the .css method to turn the text green. For the duration , you need to input the amount of time in milliseconds the animation should take. To set a specified CSS property, use the following syntax: css(" propertyname "," value "); The following example will set the background-color value for ALL matched elements:

Comments
  • You set the font size to 100% in that code and then set it to 100% again 2 seconds later. Why?
  • You're setting the font-size immediately, then again in 2 seconds. What do you expect to happen?
  • Your code is valid, please explain what you want to do in more detail, please note you are setting the font size at the same size twice!
  • Sorry for the misunderstanding folks, I forgot to mentioned that I set the font-size value to 150% initially in my CSS ......................................................................I've re-explained my problems to the responses below, hope it helps
  • Thanks for the response, I'm kind of newbie here , I'm sorry I think my question wasn't clear. I've re-explained again on the post below.
  • @EdwinLimantara - I've updated my answer with details on how to gradually decrease the font size and included a demo link.
  • Awesome ! this is what I wanted. Thank you sir
  • I think there is some misunderstanding here, let me try to explain: 1. I initially set the font-size: 150% in my css file, which mean that I wanted to change the font-size into 100% from the previous value ......................................................................2.What I meant to say is, not to change the font size for 2 second, but I meant I need a transition(the font decrease gradually), ................................................................. for example: $("#homebutton").animate({ top: '20px', left:'60px'},1500);