悬停时jquery动画边框

Question

功能几乎正常。

当您将鼠标悬停在导航中的不同链接上时，我们的想法是让某种高光（背景或下划线）跟随您，当您将鼠标悬停在不同的链接上时，它会找出左侧定位以及宽度和动画匹配。

我需要修理什么？

• 在mouseleave或mouseout上，突出显示的边框应返回活动项目
• 活动项应始终是突出显示的项。

如果您需要更多信息请问我不确定我错过了什么。

 $(function() { $(".app-promo-img-align:first").addClass("active"); $('.app-promo-images').find('.app-promo-img-align').click(function(e) { e.preventDefault; $(".app-promo-img-align").removeClass("active"); $(this).addClass("active"); }); var $el, leftPos, newWidth, $mainNav = $(".menu"); $mainNav.append("<div id='magic-line'></div>"); var $magicLine = $("#magic-line"); $magicLine .width($(".app-promo-img-align.active").width()) .css("left", $(".app-promo-img-align.active a").position().left) .data("origLeft", $magicLine.position().left) .data("origWidth", $magicLine.width()); $(".menu li a").hover(function() { $el = $(this); leftPos = $el.position().left; newWidth = $el.parent().width(); $magicLine.stop().animate({ left: leftPos, width: newWidth }); }).click(function() { $mainNav.find('li').removeClass('active'); $(this).parent().addClass('active'); $magicLine.animate({ left: $(".app-promo-img-align.active a").position().left, width: $(".app-promo-img-align.active").width() }); }); $('.menu li:not(".app-promo-img-align.active")').hover( function() { $('#magic-line').addClass('hover'); }, function() { $('#magic-line').removeClass('hover'); } ); }); 

 .bg { height: 300px; background: #000; padding-top: 50px; } .menu { padding: margin: 0 auto; list-style: none; position: relative; display: flex; justify-content: space-between; max-width: 400px; width: 100%; } .menu li { display: inline-block; } .menu li a { background: #bbb; width: 80px; height: 80px; display: block; float: left; text-decoration: none; text-transform: uppercase; } .menu li a:hover { color: white; } #magic-line { position: absolute; top: -6px; left: 0; width: 100px; height: 4px; background: #fe4902; -webkit-transition: background 400ms ease-in-out; -moz-transition: background 400ms ease-in-out; -ms-transition: background 400ms ease-in-out; -o-transition: background 400ms ease-in-out } #magic-line.current_page_item { position: absolute; top: -2px; left: 0; width: 100px; height: 2px; background: #fe4902; } #magic-line.hover { background: #fe4902; -webkit-transition: background 400ms ease-in-out; -moz-transition: background 400ms ease-in-out; -ms-transition: background 400ms ease-in-out; -o-transition: background 400ms ease-in-out; transition: background 400ms ease-in-out; } .app-promo-img-align a { position: relative; } .app-promo-img-align.active a { width: 93px; height: 93px; } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div class="bg"> <div class="nav-wrap"> <ul class="group menu app-promo-images" id="example-one"> <li class="app-promo-img-align"> <a href="#"></a> </li> <li class="app-promo-img-align"> <a href="#"></a> </li> <li class="app-promo-img-align"> <a href="#"></a> </li> <li class="app-promo-img-align"> <a href="#"></a> </li> </ul> </div> </div> 

Answer 1

添加了unhover行为。

 $(function() { $(".app-promo-img-align:first").addClass("active"); $('.app-promo-images').find('.app-promo-img-align').click(function(e) { e.preventDefault; $(".app-promo-img-align").removeClass("active"); $(this).addClass("active"); }); var $el, leftPos, newWidth, $mainNav = $(".menu"); $mainNav.append("<div id='magic-line'></div>"); var $magicLine = $("#magic-line"); $magicLine .width($(".app-promo-img-align.active").width()) .css("left", $(".app-promo-img-align.active a").position().left) .data("origLeft", $magicLine.position().left) .data("origWidth", $magicLine.width()); $(".menu li a").hover(function() { $el = $(this); leftPos = $el.position().left; newWidth = $el.parent().width(); $magicLine.stop().animate({ left: leftPos, width: newWidth }); }, function(){ $el = $('li.active'); console.log($el); leftPos = $el.position().left; newWidth = $el.width(); console.log(leftPos, newWidth); $magicLine.stop().animate({ left: leftPos, width: newWidth }); }).click(function() { $mainNav.find('li').removeClass('active'); $(this).parent().addClass('active'); $magicLine.animate({ left: $(".app-promo-img-align.active a").position().left, width: $(".app-promo-img-align.active").width() }); }); $('.menu li:not(".app-promo-img-align.active")').hover( function() { $('#magic-line').addClass('hover'); }, function() { $('#magic-line').removeClass('hover'); } ); }); 

 .bg { height: 300px; background: #000; padding-top: 50px; } .menu { padding: margin: 0 auto; list-style: none; position: relative; display: flex; justify-content: space-between; max-width: 400px; width: 100%; } .menu li { display: inline-block; } .menu li a { background: #bbb; width: 80px; height: 80px; display: block; float: left; text-decoration: none; text-transform: uppercase; } .menu li a:hover { color: white; } #magic-line { position: absolute; top: -6px; left: 0; width: 100px; height: 4px; background: #fe4902; -webkit-transition: background 400ms ease-in-out; -moz-transition: background 400ms ease-in-out; -ms-transition: background 400ms ease-in-out; -o-transition: background 400ms ease-in-out } #magic-line.current_page_item { position: absolute; top: -2px; left: 0; width: 100px; height: 2px; background: #fe4902; } #magic-line.hover { background: #fe4902; -webkit-transition: background 400ms ease-in-out; -moz-transition: background 400ms ease-in-out; -ms-transition: background 400ms ease-in-out; -o-transition: background 400ms ease-in-out; transition: background 400ms ease-in-out; } .app-promo-img-align a { position: relative; } .app-promo-img-align.active a { width: 93px; height: 93px; } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div class="bg"> <div class="nav-wrap"> <ul class="group menu app-promo-images" id="example-one"> <li class="app-promo-img-align"> <a href="#"></a> </li> <li class="app-promo-img-align"> <a href="#"></a> </li> <li class="app-promo-img-align"> <a href="#"></a> </li> <li class="app-promo-img-align"> <a href="#"></a> </li> </ul> </div> </div> 

Answer 2

好吧，最简单的事情就是将你的线以相同的方式移动到mouseout上的活动元素。

 $(function() { $(".app-promo-img-align:first").addClass("active"); $('.app-promo-images').find('.app-promo-img-align').click(function(e) { e.preventDefault; $(".app-promo-img-align").removeClass("active"); $(this).addClass("active"); }); var $el, leftPos, newWidth, $mainNav = $(".menu"); $mainNav.append("<div id='magic-line'></div>"); var $magicLine = $("#magic-line"); $magicLine .width($(".app-promo-img-align.active").width()) .css("left", $(".app-promo-img-align.active a").position().left) .data("origLeft", $magicLine.position().left) .data("origWidth", $magicLine.width()); $(".menu li a").hover(function() { $el = $(this); leftPos = $el.position().left; newWidth = $el.parent().width(); $magicLine.stop().animate({ left: leftPos, width: newWidth }); }).click(function() { $mainNav.find('li').removeClass('active'); $(this).parent().addClass('active'); $magicLine.animate({ left: $(".app-promo-img-align.active a").position().left, width: $(".app-promo-img-align.active").width() }); }).on('mouseout', function() { $el = $(".app-promo-img-align.active a"); leftPos = $el.position().left; newWidth = $el.parent().width(); $magicLine.stop().animate({ left: leftPos, width: newWidth }); }); $('.menu li:not(".app-promo-img-align.active")').hover( function() { $('#magic-line').addClass('hover'); }, function() { $('#magic-line').removeClass('hover'); } ); }); 

 .bg { height: 300px; background: #000; padding-top: 50px; } .menu { padding: margin: 0 auto; list-style: none; position: relative; display: flex; justify-content: space-between; max-width: 400px; width: 100%; } .menu li { display: inline-block; } .menu li a { background: #bbb; width: 80px; height: 80px; display: block; float: left; text-decoration: none; text-transform: uppercase; } .menu li a:hover { color: white; } #magic-line { position: absolute; top: -6px; left: 0; width: 100px; height: 4px; background: #fe4902; -webkit-transition: background 400ms ease-in-out; -moz-transition: background 400ms ease-in-out; -ms-transition: background 400ms ease-in-out; -o-transition: background 400ms ease-in-out } #magic-line.current_page_item { position: absolute; top: -2px; left: 0; width: 100px; height: 2px; background: #fe4902; } #magic-line.hover { background: #fe4902; -webkit-transition: background 400ms ease-in-out; -moz-transition: background 400ms ease-in-out; -ms-transition: background 400ms ease-in-out; -o-transition: background 400ms ease-in-out; transition: background 400ms ease-in-out; } .app-promo-img-align a { position: relative; } .app-promo-img-align.active a { width: 93px; height: 93px; } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div class="bg"> <div class="nav-wrap"> <ul class="group menu app-promo-images" id="example-one"> <li class="app-promo-img-align"> <a href="#"></a> </li> <li class="app-promo-img-align"> <a href="#"></a> </li> <li class="app-promo-img-align"> <a href="#"></a> </li> <li class="app-promo-img-align"> <a href="#"></a> </li> </ul> </div> </div>