Question

我花了大部分时间来追踪我一直在使用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>

无论我是否在＆lt; a＆gt;中放入id属性和onclick事件处理程序调用，动画都不起作用。标签或在＆lt; div＆gt;在其中。另一方面，如果我删除＆lt; a＆gt;元素标签一起，动画在＆lt; div＆gt;上按预期工作元件。

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

问题几乎没有实际意义，因为我可以轻松地使用＆lt; div＆gt;工作页面中的元素我也可以使用＆lt; a＆gt;元素。在工作代码中（更复杂）我在锚元素上使用event.preventDefault（），以便链接和其他操作由显式事件处理程序驱动，这可以通过＆lt; div＆gt;来完成。同样如此。我相信当我在＆lt; div＆gt;上执行鼠标悬停时，我甚至可以更改指针图标。所以它在这方面也模仿了一个真正的锚。

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

jQuery动画无法在锚标签或锚标签子项中工作

1 个答案: