1

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

Improve this question
4
  • 1
    You set the font size to 100% in that code and then set it to 100% again 2 seconds later. Why? Commented Jan 9, 2013 at 21:46
  • You're setting the font-size immediately, then again in 2 seconds. What do you expect to happen? Commented Jan 9, 2013 at 21:47
  • 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! Commented Jan 9, 2013 at 21:47
  • 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 Commented Jan 9, 2013 at 22:14

3 Answers 3

Reset to default
4

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/

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

2 Comments

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.
0

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/

Improve this answer

1 Comment

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);
0

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");
Improve this answer

Comments

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.