Question

对不起那些我之前发过一个可能没什么意义的问题。所以我删除了它，我将重新发布它。

我有一个链接，点击时将用户导航到页面的特定部分（这部分很有用）。但是，我想要页面的“特定”部分（即一个href链接）进行动画处理，以便用户的眼睛注意它。

所以我有这样的事情：

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

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

$(".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>

所以当我点击第一个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对其进行硬编码，我能以某种方式做到这一点吗？

Answer 1

动画时使用$(this)选择器。此实例中的$(this)将是激活click事件的控件。

您应该将此更改为以下内容，您将专门加载所需的元素。

$(".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();
});

Answer 2

因为您知道结果锚标记的id（假设这是因为默认情况下滚动到#link哈希时，这意味着您滚动到id ='的元素链接'）。您可以使用以下方式为其设置动画：

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

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

$('[name="'+name+'"']).animate(...);

动画结果href给出了它的名字？

2 个答案: