jQuery的动画的问题，溶液

我一个导航菜单的标记结构低于上工作，跨度元件被添加上的document.ready： -jQuery的动画的问题，溶液

<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>

跨度被定位与绝对设置宽度和高度，并包含一个箭头图像作为背景。

我使用jQuery当用户点击菜单类移动活动跨度所选择的菜单（LI）元件的后面，作为其选择的视觉指示器的动画跨度/箭头图像。

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

箭头正确定位在文档加载，但不 - ：

活动时（ACT）被设置在根里，但如果其他地方放置在列表例如这工作正常当用户点击时移动到正确的选择。我已经尝试过我的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); 


});

来源

2011-08-30 KryptoniteDove

解决方案：

我开始用下面发布的代码玩，才意识到我真难为我自己通过嵌套含锂元素本身的箭头图像的跨度。这使当前的li元素始终为跨度的0位置，因此，如果它在节点3行进到节点1，则它必须减去负数。

此修复程序是非常简单说真的，我搬到跨度到我的无序列表的的顶部和使用的jQuery的CSS设置页面加载图像的起始位置。这样一来，我没有在所有或乱用方程式来改变动画代码..数学从来就不是我的强项;）

工作液可以在这里看到（http://www.kryptonite-dove.com /sandbox/menu/fix.html）感谢您的帮助！

来源

2011-09-02 10:07:39 KryptoniteDove

我不知道，如果我有问题，但检查的子菜单里有“位置：亲属” 。如果跨度位置不正确，这可能是原因。

UPDATE

我想你应该重写一下脚本。

// 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"); 
});

希望你能修改这个基本的代码来满足你的需要。

来源

2011-08-31 22:20:07 Webars

子菜单是绝对的，但我会添加代码，以防止有人从子菜单启动，如果我得到它的工作;）这里的CSS： - – KryptoniteDove

下面是两个例子，当箭头添加到第一位家长的运动效果不错，加入第二位时你可以看到差异。我想知道的是如何让它移动到选定的元素，而不管活动箭头添加在哪里。 http://kryptonite-dove.com/sandbox/menu/arrow-1st-parent.html http://kryptonite-dove.com/sandbox/menu/arrow-2nd-parent.html – KryptoniteDove

Thanks will give这是一个bash，让你知道我怎么走！ :) – KryptoniteDove

jQuery的动画的问题，溶液

回答

相关问题