javascript - jQuery 动画缩放需要我单击正文？

Question

我试图允许缩放特定元素

像这样:

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

一切都很好，但为了让它缩放，我需要至少点击一次 body 看起来？我不知道为什么。我尝试自行运行动画，但仍然不起作用。

编辑:

这是我的完整代码，

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;
            }       
        }
    } 

});

鼠标滚轮监听器运行良好(在 chrome 上，尚未在其他地方测试过)，并且绝对不是问题(我在 chrome 上使用 console.log 进行了测试)

Answer 1

据我了解，您希望在页面加载后立即执行此操作，然后:

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

顺便说一句，5 的持续时间非常短(即 5 毫秒)，要查看任何动画，请使用 500(即 0.5 秒)，例如:)

示例(使用更长的动画和更大的缩放 (50%)，让您看到效果):

$(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>

编辑

据我所知，还有另一个问题。它确实对我有用，但也许你尝试将其添加到准备好的文档中......

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