所以我制作了这个动画侧边栏:
HTML
<div class="sidebar">
<div class="block"><a class="link" href="#link1">Menu Option 1</</div>
<div class="block">Menu Option 2</div>
<div class="block">Menu Option 3</div>
<div class="block">Menu Option 4</div>
</div>
CSS
.sidebar{
position:fixed;
height:100%;
width:200px;
top:0;
left:0;
z-index: 100;
}
.block{
width:5%;
height: 20px;
border-style: solid;
border-width: 1px;
text-indent: 100%;
text-align: right;
white-space: nowrap;
overflow: hidden;
background-color: red;
padding: 10px;
}
.link{
text-indent: 100%;
text-align: right;
white-space: nowrap;
width:100%;
height: 100%;
}
#slider {
border:1.5px solid black;
width:10px;
position:fixed;
}
jQuery
//Sidbar Animations
$(".block").mouseover(function() {
$(this)
.animate({
width: "90%"
}, {
queue: false,
duration: 400
}).css("text-indent", "0");
});
$(".block").mouseout(function() {
$(this)
.animate({
width: "5%"
}, {
queue: false,
duration: 500
}).css("text-indent", "100%");
});
它有点管用,但并不完全符合预期。 因此,如果我在 div 中添加链接,它仍然会显示动画,但有时动画会中断并且 div 会崩溃,并且很难真正点击链接。
JSFiddle:http://jsfiddle.net/znxygpdw/
我怎样才能避免这种情况?
最佳答案
在这种情况下最好使用hover
功能:
//Sidbar Animations
$(".block").hover(function() {
$(this)
.animate({
width: "90%"
}, {
queue: false,
duration: 400
}).css("text-indent", "0");
}, function() {
$(this)
.animate({
width: "5%"
}, {
queue: false,
duration: 500
}).css("text-indent", "100%");
});
关于javascript - jquery 动画的意外行为,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/30684594/