我一直在努力保持当用户在其上绘制鼠标时动画仍然在场景中的 div。
HTML
<table>
<tr>
<td id="portrait">
<div id="photo"></div>
</td>
<td id="slide">
<div id="slider">
<a id="something" class="thisthing">some link here</a>
</div>
</td>
</tr>
</table>
CSS
#portrait{
width:120px;
height:100px;
top:20px;
border: solid black 1px;
margin: 0px;
padding: 0px;
}
#slide{
height:100px;
border: none;
padding-left:30px;
}
#slider{
border: none;
padding-left:30px;
background-color:green;
position:relative;
height:100%;
opacity:0;
width:0px;
overflow:hidden;
}
.thisthing{
cursor:pointer;
font-size: 15px;
text-shadow: -1px 0 white, 0 1px white, 1px 0 white, 0 -1px white;
color: green;
white-space: nowrap;
}
#something{
position:relative;
left: -25px;
}
JS
$('#portrait').mouseover(function(){
$('#slider').animate({
opacity: 1,
width: "300px"
}, 1500, $.noop);
});
$('#slider').mouseout(function(){
$('#slider').animate({
opacity: 0,
width: "0px"
}, 1000, $.noop);
});
我的解决方案根本无法正常工作,褪色严重且滞后很多,因为一旦用户离开黑色方 block ,div 就会立即消失。我想要的是将黑色方 block 悬停,出现绿色div然后仅当div消失 $(/* .mouseout() 黑色方 block 或绿色 div*/).fadeOut(thegreendiv)
.
AKA 当您将链接悬停在“此处的某个链接”或绿色 div 的任何其他部分时,我希望它保留在那里,否则会淡出。
最佳答案
使用方法 mouseenter
和 mouseleave
而不是 over
和 out
并且有更大的 mouseleave 区域
HTML
<table id="hoverOutZone">
<tr>
<td id="portrait">
<div id="photo"></div>
</td>
<td id="slide">
<div id="slider">
<a id="something" class="thisthing">some link here</a>
</div>
</td>
</tr>
</table>
新 JS
$('#portrait').mouseenter(function () {
$('#slider').animate({
opacity: 1,
width: "300px"
}, 1500);
});
$('#hoverOutZone').mouseleave(function () {
$('#slider').animate({
opacity: 0,
width: "0px"
}, 1000);
});
关于javascript - 在场景中维护一个动画 div,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/20642833/