html
<ul class="wrap">
<li title="Lorem ipsum dolor sit amet"></li>
<li title="consectetur adipisicing elit"></li>
<li title="incididunt ut labore et dolore magna aliqua"></li>
<li title="Ut enim ad minim veniam"></li>
<li title="quis nostrud exercitation ullamco"></li>
<li title="laboris nisi ut aliquip ex ea commodo"></li>
<li title="Duis aute irure dolor in reprehenderit"></li>
<li title=" Excepteur sint occaecat cupidatat non"></li>
<div class="sub">
<div class="bg"></div>
</div>
</ul>
CSS
*{
padding: 0;
margin: 0;
border: none;
}
body{
padding: 100px;
}
ul{
list-style: none;
overflow: hidden;
position: relative;
}
li{
width: 220px;
height: 220px;
background: rgba(0, 0, 0, 0.6);
position: relative;
overflow: hidden;
cursor: pointer;
float: left;
margin-right: 20px;
margin-bottom: 20px;
display: block;
}
.sub{
width: 210px;
height: 210px;
background: #ff3030;
color: #fff;
padding: 5px;
position: absolute;
display: none;
}
JQUERY
var li = $('.wrap').children('li'),
sub = $('.sub');
li.on('mouseover', function() {
sub.show();
var left = $(this).offset().left,
top = $(this).offset().top,
text = $(this).attr('title'),
bg = $('.bg');
sub.stop().animate({
left: left - $('.wrap').offset().left,
top: top - $('.wrap').offset().top
});
bg.stop().animate({
opacity: 0
}, function() {
bg.text(text);
bg.animate({
opacity: 1
});
});
}).on('mouseleave', function() {
sub.fadeOut();
});
这是 fiddle http://jsfiddle.net/GTHM4/
全宽看起来更好 http://jsfiddle.net/GTHM4/embedded/result/
如您所见,问题出在“损坏的”工作“mouseleave”事件中,而 div“bg”总是“想要”消失……怎么了?
最佳答案
一切正常
var li = $('.wrap').children('li'),
sub = $('.sub'),
wrap = $('.wrap');
wrap.on('mouseover','li', function() {
sub.show();
var left = $(this).offset().left,
top = $(this).offset().top,
text = $(this).attr('title'),
bg = $('.bg');
sub.stop().animate({
left: left - $('.wrap').offset().left,
top: top - $('.wrap').offset().top
});
bg.stop().animate({
opacity: 0
}, function() {
bg.text(text);
bg.animate({
opacity: 1
});
});
}).on('mouseleave', function() {
sub.fadeOut();
});
关于javascript - 投资组合列表中损坏的 animate() 算法,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/22744551/