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

Community
  • 1
  • 1
dodgerblue
  • 255
  • 3
  • 7
  • 18
  • 1
    You set the font size to 100% in that code and then set it to 100% again 2 seconds later. Why? – Adam Jan 09 '13 at 21:46
  • You're setting the font-size immediately, then again in 2 seconds. What do you expect to happen? – Shmiddty Jan 09 '13 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! – ButterDog Jan 09 '13 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 – dodgerblue Jan 09 '13 at 22:14

3 Answers3

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/

gilly3
  • 87,962
  • 25
  • 144
  • 176
  • 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. – dodgerblue Jan 09 '13 at 22:10
  • @EdwinLimantara - I've updated my answer with details on how to gradually decrease the font size and included a demo link. – gilly3 Jan 09 '13 at 22:36
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/

Kianosh
  • 179
  • 1
  • 3
  • 14
  • 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); – dodgerblue Jan 09 '13 at 22:03
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");