jquery animate css

Question

I have a script       hfont1   hover      function               this  css   color    efbe5c   font-size   52pt       mouseover             function               this  css   color    e8a010   font-size   48pt        mouseout            how can i animate it or slow it down  so it wont be instant

User · Answer

You can actually still use   css  and apply css transitions to the div being affected  So continue using   css  and add the below styles to your stylesheet for   hfont1   Since   css  allows for a lot more properties than   animate   this is always my preferred method    hfont1       -webkit-transition  width 0 4s      transition  width 0 4s

User · Answer

Just use  animate   instead of  css    with a duration if you want   like this       hfont1   hover function           this  animate   color    efbe5c   font-size   52pt    1000      function           this  animate   color    e8a010   font-size   48pt    1000         You can test it here   Note though  you need either the jQuery color plugin  or jQuery UI included to animate the color   In the above  the duration is 1000ms  you can change it  or just leave it off for the default 400ms duration

User · Answer

If you are needing to use CSS with the jQuery  animate   function  you can use set the duration       my image   css        left   1000px       6000           We have the duration property set to 6000   This will set the time in thousandth of seconds  6 seconds   After the duration our next property  easing  changes how our CSS happens   We have our positioning set to absolute   There are two default ones to the absolute function   linear  and  swing    In this example I am using linear   It allows for it to use a even pace   The other  swing  allows for a exponential speed increase   There are a bunch of really cool properties to use with animate like bounce  etc     document  ready function            my image   css            height    100px            width   100px            background-color    0000EE            position   absolute            property than value          my image   animate            left   1000px        6000   linear   function            alert  Done Animating

User · Answer

You could opt for a pure CSS solution    hfont1       transition  color 1s ease-in-out      -moz-transition  color 1s ease-in-out     FF 4        -webkit-transition  color 1s ease-in-out     Safari  amp  Chrome        -o-transition  color 1s ease-in-out     Opera

User · Answer

The example from jQuery s website animates size AND font but you could easily modify it to fit your needs      go   click function          block   animate        width   70        opacity  0 4      marginLeft   0 6in       fontSize   3em        borderWidth   10px       1500      http   api jquery com animate

[javascript] jquery animate .css

Examples related to javascript

Examples related to jquery

Examples related to jquery-animate