0

私は 1 日の大半を、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 イベント ハンドラの呼び出しを <a> タグに配置するか、タグ内の <div> に配置するかに関係なく、アニメーションは機能しません。一方、<a> 要素タグを完全に削除すると、アニメーションは <div> 要素で期待どおりに機能します。

なぜこれが起こるのか誰にも分かりますか？

<a> 要素でできることを作業ページの <div> 要素で簡単に実行できるため、この問題はほとんど意味がありません。作業コード (はるかに複雑) では、アンカー要素で event.preventDefault() を使用しているため、リンクやその他のアクションは明示的なイベント ハンドラーによって駆動され、これは <div> からも同様に実行できます。<div> にマウスオーバーしたときにポインター アイコンを変更して、この点でも真のアンカーを模倣できると思います。

4

1 に答える 1

0

これは、アニメーションが配置される前にブラウザーがアンカーに移動するためです。この種の問題を回避するためのプラグインがあります。または、独自のプラグインを作成することもできます。

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;
        })
    })
}
于 2013-09-19T20:51:25.130 に答える