在导航中对活动项目背景进行动画处理失败

Animating the active item background in a nav fails

本文关键字：动画 处理 失败 背景 项目 导航 活动      更新时间：2023-09-26

我有以下标记：

<ul>
    <li><a href="#">first</a></li>
    <li><a href="#">largerWord</a></li>
    <li class="active"><a href="#">third</a></li>
</ul>

这些项目具有透明背景，但活动类除外，该类具有蓝色。

这个想法是，当用户单击（不是活动）而不是切换背景时，我想移动背景，您可以在此处看到几乎完成的结果，但它在第一次单击时失败（有关错误日志，请参阅问题末尾）：

http://jsfiddle.net/FeV55/26/

我所做的是动态创建一个较低的 z 索引<li>并根据（单击的）项目偏移量对左侧进行动画处理，并根据（单击的）项目宽度对宽度进行动画处理

jquery代码：

$(document).ready(function(){
    $('ul li a').not('.active').click(function(){
        /*caching*/       
        var activa = $('li.active');
        var bg = $('li.back');;
        var list = $(this).closest('ul');
        /*when it's first click the background item doesnt exist*/
        if(bg.length>0 == false){
            list.append('<li class="back"></li>');
        }
        var width = $(this).outerWidth(true);
        var leftUL = list.offset().left;
        var leftThis = $(this).offset().left;
        var left  = leftThis - leftUL;
        /*Remove class to previous active*/
        activa.removeClass('active');
        /*Cancel background even if parent is active*/
        $(this).addClass('noBg');
        /*Update active class*/
        $(this).parent().addClass('active');
        /*Move the background to its offset*/
        bg.animate({'left':left,'width':width});
        /*logs*/
        $('#oUl').text(leftUL);
        $('#ocl').text($(this).offset().left);
        $('#odf').text(left);
        $('#obg').text(bg.offset().left);
    });
});

但它在第一次点击时失败，火虫日志：

bg.offset() is null
[Parar en este error]   
$('#obg').text(bg.offset().left);

问题是为什么？ 无论如何，该项目应该在那时存在。

请务必在创建元素后选择分配给bg的元素：

 var bg = $('li.back');
 if (bg.length == 0) {
   list.append('<li class="back"></li>');
   bg = $('li.back');
 }

更好的是，将元素创建到 bg 中：

 if (bg.length == 0) {
   bg = $('<li class="back"></li>');
   list.append(bg);
 }
相关文章：