悬停的jquery动画边框

Question

Th函数工作得很好。

当鼠标移动到不同的链接上时，这个想法是让某种类型的背景（背景或下划线）跟着你，当你将鼠标放在不同的链接上时，它会计算出左侧的定位和宽度和动画匹配。

我需要解决什么问题？

• 在鼠标离开或鼠标移出高亮边框应该回去的活动项目
• 活动项目应该永远是起点一个突出的。

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

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

好，最简单的事就是只动线以同样的方式到有源元件上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>

Answer 2

增加了一个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>