Question

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

Answer 1

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/