0

抱歉，我之前发布了一个可能没有多大意义的问题。所以我删除了它，并打算重新发布它。

我有一个链接，单击该链接可将用户导航到页面的特定部分（这部分效果很好）。但是，我希望页面的“特定”部分（即 a href 链接）进行动画处理，以便用户的眼睛注意它。

所以我有这样的事情：

<a href="#" name="myapp" class="app">click me</a>

基本上有了这个，我在 jquery 中有一个点击事件，它在类名的任何 href 上调用，app如下所示：

$(".app").click(function (e) {
                var name = this.name;
                scrollToAnchor(name);
                e.preventDefault();
            });

这很好用，用户单击链接并调用此函数，该函数调用scrollToAnchor(name)函数。现在在 scrollToAnchor 函数之后，我想动画它指向的对象（即名称）。所以想象一下，在一个网站的顶部，我有我在上面发布的那个 href。在网站底部附近的某个地方，我还有另一个href：

<a href="someURL" name="myapp">Some Site</a>

因此，当我单击第一个 a href 时，它会将我滚动到此锚标记。那部分正在工作，但我想为第二个锚标签背景设置动画。如果我试试这个：

$(".app").click(function (e) {
                var name = this.name;
                scrollToAnchor(name);
                $(this).animate({
                    backgroundColor: "#FFD700"
                },
                    2500,
                    function () {
                        $(this).animate({ backgroundColor: "#fff" }, 2500);
                    });
                e.preventDefault();
            });

这不会起作用，因为它会为我在此问题顶部发布的初始锚标记设置动画。我想为它滚动到的锚标记（保存name变量的那个）设置动画。我可以以某种方式做到这一点，而无需通过 ID 对其进行硬编码吗？

4

2 回答 2

1

您$(this)在制作动画时使用了选择器。 $(this)在这种情况下，将是激活点击事件的控件。

您应该将其更改为如下所示，您将在其中专门加载所需的元素。

$(".app").click(function (e) {
    var name = this.name;
    scrollToAnchor(name);
    var target = $('a[href="#' + this.name + '"]');
    target.animate({
         backgroundColor: "#FFD700"
      },
      2500,
      function () {
         target.animate({ backgroundColor: "#fff" }, 2500);
      }
    );

    e.preventDefault();
});
于 2013-07-12T15:01:35.137 回答
0

由于您知道生成的锚标记id（假设这是因为默认情况下当您滚动到#link哈希时，这意味着您滚动到 id = 'link' 的元素）。您可以使用以下方法对其进行动画处理：

var name = this.name;
scrollToAnchor(name);
$('#'+name).animate(...);
e.preventDefault();

如果您需要按名称定位，您可以执行以下操作：

$('[name="'+name+'"']).animate(...);
于 2013-07-12T14:58:00.577 回答