<!Doctype html>
<html>
<head>
<link href="style.css" rel="stylesheet" type="text/css" />
<script src="jquery-1.10.2.min.js" type="text/javascript"></script>
<script src="animation.js" type="text/javascript"></script>
</head>
<body>
<ul class="svertical">
<li><a>MenuElement1</a></li>
<li><a>MenuElement2</a></li>
<li><a>MenuElement3</a></li>
<li><a>MenuElement4</a></li>
<li><a>MenuElement5</a></li>
<li><a>MenuElement6</a></li>
</ul>
</body>
</html>`
` CSS添加动画 css 来显示 li 元素，我创建了我的菜单项 CSS 来添加动画 css 来显示 li 元素，我创建了我的菜单项 CSS 来添加动画 css 显示我创建的菜单项中的 li 项
ul.svertical{
width: 200px; /* width of menu */
overflow: auto;
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#eeeeee), color-stop(100%,#cccccc)) no-repeat; /* background of menu */
margin:0px;
padding: 0;
padding-top: 7px; /* top padding */
list-style-type: none;
position:absolute;
}
ul.svertical li{
text-align: left; /* right align menu links */
position: relative;
display: inline-block;
text-indent: 5px;
overflow: hidden;
background: rgb(127, 201, 68); /* initial background color of links */
font: bold 16px Germand;
text-decoration: none;
padding: 5px;
color: black;
border:1px solid;
border-radius:5px;
left:-110px;
}
animation.js
$(document).ready( function(){
var timer = 0;
$('.svertical li').hover(
function(){
$(this).stop().animate({ left: "0px" }, 'fast');
$('.svertical li').each(function (i){
timer = (timer * .8 + 150);
$(this).stop().animate({ left: "0px" }, timer);
});
},
function(){
$(this).stop().animate({ left: "-110px" }, 'fast');
$('.svertical li').each(function (i){
timer = (timer * .8 + 150);
$(this).stop().animate({ left: "-110px" }, timer);
});
});
});
最佳答案
看来你只需要重置你的计时器变量:
$(document).ready( function(){
var timer = 0;
$('.svertical li').hover(
function(){
timer = 0; // Reset timer variable
$(this).stop().animate({ left: "0px" }, 'fast');
$('.svertical li').each(function (i){
timer = (timer * .8 + 150);
$(this).stop().animate({ left: "0px" }, timer);
});
},
function(){
$(this).stop().animate({ left: "-110px" }, 'fast');
$('.svertical li').each(function (i){
timer = (timer * .8 + 150);
$(this).stop().animate({ left: "-110px" }, timer);
});
});
});
关于jquery - 我想在每个 li 悬停时从左到右为 li 元素设置动画，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/22278709/