javascript - 如何实现鼠标点击border-bottom滑动跟随的动画效果？
本文介绍了javascript - 如何实现鼠标点击border-bottom滑动跟随的动画效果？的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
问 题
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
*{margin: 0;padding: 0;}
ul {list-style: none;border: 1px solid #000;display: inline-block;text-align: center;position: relative;}
li {display: inline-block;width: 80px;height: 30px;border: 1px solid #000;}
span {position: absolute;bottom: -1px;left: 1px;width: 80px;height: 5px;background: #F55;}
</style>
<script src="http://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>
</head>
<body>
<ul>
<li>1</li><!--
--><li>2</li><!--
--><li>3</li>
<span></span>
</ul>
</body>
<script>
$("li").eq(0).click(function(){
$('span').animate({left: '1px'}, "fast")
})
$("li").eq(1).click(function(){
$('span').animate({left: '83px'}, "fast")
})
$("li").eq(2).click(function(){
$('span').animate({left: '166px'}, "fast")
})
</script>
</html>
类似这样的效果，鼠标点击目标，border-bottom会跟随滑过去（不是直接跳过去）
有没有聪明一点的办法实现这个效果，复用性比较好的。解决方案
$("li").click(function(){
var liLen = 82
var left = $(this).index() * liLen + 1
$('span').animate({left: left + 'px'}, "fast")
}) 这篇关于javascript - 如何实现鼠标点击border-bottom滑动跟随的动画效果？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
