jQuery动画缩放需要我点击主体

jQuery animate zoom requires me to click body?

本文关键字：主体 动画 缩放 jQuery      更新时间：2023-09-26

我正在尝试允许缩放特定元素

像这样：

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

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

编辑：

这是我的完整代码，

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

mousewheel侦听器运行良好（在chrome上，还没有在其他地方测试过），绝对不是问题所在（我用chrome上的console.log测试过）

据我所知，你想在页面加载后立即执行，然后：

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

问题是与jQuery UI的"Draggable"函数冲突。这需要我在元素在DOM 中变得"可见"之前选择它

基于注释更新：

您不需要单击body，但您的鼠标必须在页面上。只有这样鼠标滚轮才会触发事件。

在页面上，将焦点设置在特定元素上。$("body").focus();获取事件触发器。

演示

您必须在dom就绪事件处理程序中运行它

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

更改传递给animate函数的动画时间。5的值太小。

相关文章：