jQuery动画问题，添加解决方案

Posted 2023-05-08

【中文标题】jQuery动画问题，添加解决方案

【英文标题】：jQuery animate problem, solution added

【发布时间】：2011-11-07 03:53:36

【问题描述】：

我正在开发一个导航菜单，标记结构如下，span 元素已添加到 document.ready：-

<ul id="menu">
        <li class="menu act">Additional Fixture<span class="active"></span></li>
        <li class="menu">list with sub menu
            <ul class="sub-menu">
                <li class="menu">Option one</li>
            <li class="menu">Option two</li>
            <li class="menu">Option three</li>
            <li class="menu">Option four</li>
            <li class="menu">Option five</li>
        </ul>
    </li>
    <li class="menu"">Special Tricast</li>

跨度是绝对定位的，具有设定的宽度和高度，并包含一个箭头图像作为背景。

当用户单击菜单类以将活动跨度移动到所选菜单 (li) 元素后面作为其选择的视觉指示器时，我正在使用 jQuery 为跨度/箭头图像设置动画。

当 active (act) 设置在根 li 时，这可以正常工作，但如果位于列表中的其他任何位置，例如：-

<ul id="menu">
        <li class="menu">Additional Fixture<span class="active"></span></li>
        **<li class="menu act">list with sub menu</li>**
</ul>

文档加载时箭头的位置正确，但用户单击时箭头未移动到正确的选择。我已经为我的 divLocation 变量尝试了位置和偏移量，我目前正在使用位置，因为即使在根目录下，偏移量也无法工作。

我基本上希望根据用户导航到的页面设置箭头，因此无论列表的长度或位置如何，动画都需要从任何起始位置开始。

我浏览了论坛并尝试了一些方法，但说实话我很难过，非常感谢任何帮助！

下面是动画跨度/箭头图像的 jQuery 代码：-

var divLocation = $(this).position();

$("span.active").animate(
  'top': divLocation.top + topOffset,
      'left': divLocation.left + leftOffset

, animationSpeed, "linear", function() 

$(selectedElement).addClass("text-light"); 
    $(selectedElement).fadeTo("100", opacityIn);


);

【参考方案1】：

我不确定是否有问题，但请检查子菜单 li 是否有“位置：相对”。如果 span 没有正确定位，这可能是原因。

更新

我认为你应该稍微重写一下脚本。

// set height of the main links
var mainLinksHeight = 35;

// get index of the clicked element
var nextLink;

$('#menu li').click(function () 
    nextLink = $(this).index();
    $("span.active").animate( top: nextLink * mainLinksHeight , animationSpeed, "linear");
);

希望您能够根据需要修改此基本代码。

【讨论】：

子菜单是绝对的，但我会添加代码以防止有人从子菜单开始，如果我让它工作;）这是CSS：-

这里有两个例子，当箭头被添加到第一个父项时，移动工作正常，当添加到第二个 li 时，你可以看到差异。我想知道的是如何使它移动到选定的元素，而不管在哪里添加了活动箭头。 kryptonite-dove.com/sandbox/menu/arrow-1st-parent.htmlkryptonite-dove.com/sandbox/menu/arrow-2nd-parent.html

谢谢，我会给它一个狂欢，让你知道我的进展！ :)

当活动跨度附加到菜单中的 li 元素时仍然不起作用> 1.还有其他想法吗？认为某种方程式是前进的方向。

干得好，恭喜！你会赞成我的回答，可以这么说吗？ :)

【参考方案2】：

解决方案：

我开始使用下面发布的代码，并意识到我将包含箭头图像的 span 嵌套在 li 元素本身中，这让我自己的生活变得困难。这使得当前的 li 元素始终位于跨度的 0 位置，因此如果它在节点 3 处移动到节点 1，则它必须转到负数。

修复非常简单，我将跨度移动到无序列表的顶部，并使用 jQuery .css 设置页面加载时图像的起始位置。这样，我根本不必更改动画代码或弄乱方程式。数学从来都不是我的强项；）

可以在此处查看工作解决方案 (http://www.kryptonite-dove.com/sandbox/menu/fix.html) 感谢您的帮助！