javascript - jQuery animate zoom requires me to click body? -

i trying allow zooming of specific element

like so:

jquery('#center-of-attention').animate({"zoom": "+=5%"}, 5); 

it works fine, in order zoom, need have clicked on body @ least once seems? i'm not sure why. i've trying running animate it's self still doesn't work.

edit:

this full code,

jquery(document).ready(function() {    var currentzoom = 100;     jquery(window).bind('mousewheel', function(e){          if(e.originalevent.wheeldelta > 0) {             zoom('in');         } else {             zoom('out');         }      });    function zoom(zoomstate) {         if(zoomstate == 'in') {             if(currentzoom < 150) {                 jquery('#center-of-attention').animate({"zoom": "+=5%"}, 5);                 currentzoom += 5;             }            } else {             if(currentzoom > 100) {                 jquery('#center-of-attention').animate({"zoom": "-=5%"}, 5);                 currentzoom -= 5;             }                }     }   }); 

the mousewheel listener runs fine (on chrome, haven't tested elsewhere yet) , not problem (i tested console.log on chrome)

as understand, want page loaded, then:

$(document).ready(function(){$("#center-of-attention").animate({"zoom": "+=5%"}, 5);}) 

and btw, 5 small duration (that's 5 ms), see animation, use 500 (that's 0,5 s), example :)

example (with bit longer animation , more zoom (50%), let see effect):

$(document).ready(function(){$("#center-of-attention").animate({"zoom": "+=50%"}, 500);})

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>  <div id="center-of-attention">some text there</div>

edit

there problem, can see. work me, maybe try adding document ready...

$( "document.body" ).focus()