jQuery nav .animate .hover - 为什么不用这个工作？

我有一个我尝试动画的菜单。我希望它在页面加载时可见，然后滑动到左边距。在悬停时，我希望每个li在右侧都有150px的动画效果，而在鼠标离开时的效果要比-150px大。jQuery nav .animate .hover - 为什么不用这个工作？

我几乎可以肯定我的代码是正确的，但是......没有。你能帮我吗？

<script type="text/javascript"> 

$(document).ready(function() { 
    $('#nav').animate({left: "-110px"}); 

//When mouse rolls over 
    $('#nav li').hover(function() { 
    $(this).stop().animate({left: "150px"}, {queue: false, duration: 'slow'}); 

    }, function() { 
    $(this).stop().animate({left: "-150px"}, {queue: false, duration: 'slow'}); 

    }); 


    }); // end of document ready 

</script>

来源

2013-02-06 eloist

尝试改变'留下： “150像素”'到'左： “+ = 150像素”'。 – hjpotter92

你能发布你的html吗？ –

不知道如何添加我的html。它告诉我它的格式不正确... – eloist

你必须设置<li>的position到relative或选择使用margin-left。此外，最好使用mouseenter和mouseleave，以便仅当鼠标指针位于所需元素上时才会触发事件（有关详细信息，请参阅mouseover()）。试试这个：

HTML

<ul id="nav"> 
    <li>Item1</li> 
    <li>Item2</li> 
</ul>

CSS

li { 
    position: relative; 
}

$nav = $('#nav'); 
$nav.animate({'left': "-110px"}); 

//When mouse rolls over 
$nav.find('li') 
.on('mouseenter', function() { 
    $(this).stop().animate({'left': "150px"}, {queue: false, duration: 'slow'}); 
}) 
.on('mouseleave', function() { 
    $(this).stop().animate({'left': "-150px"}, {queue: false, duration: 'slow'}); 
});

您可以测试它here。

来源

2013-02-07 00:24:18 Ragnarokkr

'.hover（）'几乎可以处理mouseenter并离开你。 –

谢谢！我之前用mouseenter和mouseleave尝试过它，但无法使它工作。这绝对是李的立场，让我沮丧。非常感激！ – eloist

@ jimjimmy1995是的，你是对的。这是我不习惯使用快捷版本。通常我更喜欢使用'on（）'/'off（）'方法。 @ user2033669不客气。 – Ragnarokkr

http://jsfiddle.net/T5W2P/

您需要设置的位置相对。

HTML：

<ul id="nav"> 
    <li>Link</li> 
    <li>Link</li> 
    <li>Link</li> 
    <li>Link</li> 
    <li>Link</li> 
    <li>Link</li> 
    <li>Link</li> 
</ul>

CSS：

#nav, #nav li { 
    position: relative; 
}

的jQuery：

$(document).ready(function() { 
    $('#nav').animate({ 
     left: "-20px" 
    }); 
    //When mouse rolls over 
    $('#nav li').hover(function() { 
     $(this).stop().animate({ 
      left: "20px" 
     }, { 
      queue: false, 
      duration: 'slow' 
     }); 
    }, function() { 
     $(this).stop().animate({ 
      left: "0px" 
     }, { 
      queue: false, 
      duration: 'slow' 
     }); 
    }); 
});

来源

2013-02-07 00:27:04

jQuery nav .animate .hover - 为什么不用这个工作？

回答

相关问题