jQuery 动画在锚标记或锚标记子项中不起作用答案

【问题标题】：jQuery animation not working in anchor tags or anchor tag childrenjQuery 动画在锚标记或锚标记子项中不起作用
【发布时间】：2013-09-19 20:38:08
【问题描述】：

我花了一天的大部分时间来跟踪我在使用 jQuery 动画时遇到的问题。将 jQuery.animate() 应用于锚元素或锚元素内的子元素似乎存在问题，至少在移动动画方面是这样。我将问题归结为一个相当简单的示例来说明问题：

<!DOCTYPE html>
<html>
<head>
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8/jquery.min.js"></script>
    <script>
        var foo = {};

        function TestMove(newx, newy) {
            this.newx = newx;
            this.newy = newy;
        }

        TestMove.prototype = {
            movex:function () {
                $("#newsec").animate({left: this.newx + "px"});
            },
            movey:function () {
                $("#newsec").animate({top: this.newy + "px"});
            }
        }

        function bar() {
            foo[1].movex();
            foo[1].movey();
        }

        function init() {
            foo[1] = new TestMove(200,200);
        }
    </script>
</head>
<body onload="init()">
    <a href="" style="position: relative;">
        <div style="position: relative; height: 50px; width: 50px; background-color: red;" id="newsec" onclick="bar()"></div>
    </a>
</body>
</html>

无论我是将 id 属性和 onclick 事件处理程序调用放在标记还是其中的

中，动画都不起作用。另一方面，如果我完全删除元素标记，则动画在

元素上按预期工作。

有人知道为什么会这样吗？

这个问题几乎没有实际意义，因为我可以轻松地在工作页面中使用

元素，而我也可以使用元素。在工作代码（更复杂）中，我在锚元素上使用 event.preventDefault()，以便链接和其他操作由显式事件处理程序驱动，这也可以从

完成。我相信我什至可以在将鼠标悬停在

上时更改指针图标，以便在这方面也能模仿真正的锚点。

【问题讨论】：

只是一个建议 - 使用 .click() jquery 事件（如果内容不是静态的，则使用 .on()）

另外，每次加载时都会发生这种情况吗？如果是这样，您第一次不需要事件，只需在页面加载后执行 .load(function(){ /* code here */ });

The animation seems to work fine, if you cancel the click on the anchor -- 我看不出它是怎么坏的。

标签： javascript jquery css html

【解决方案1】：

这是因为浏览器会在动画到位之前到达锚点。有一些插件可以解决这些问题，或者您可以自己组装。

http://briangonzalez.org/arbitrary-anchor

简单实现示例：

 jQuery.fn.anchorAnimate = function(settings) {

    settings = jQuery.extend({
        speed : 1100
    }, settings);   

    return this.each(function(){
        var caller = this
        $(caller).click(function (event) {  
            event.preventDefault()
            var locationHref = window.location.href
            var elementClick = $(caller).attr("href")
            var destination = $(elementClick).offset().top;

            $("html:not(:animated),body:not(:animated)").animate({ scrollTop: destination}, settings.speed, function() {
                window.location.hash = elementClick
            });
            return false;
        })
    })
}

【讨论】：

Stefano D 似乎成功了。添加代码以禁用锚标记的默认事件处理程序允许单击落入封闭的 div 并且代码有效。虽然我已经在生产页面上处理了这个问题，但显然我需要考虑到这一点来重新审视代码。