嗨,伙计们,我正在寻找具有此动画的 div 面板,当鼠标悬停在面板上时,该面板将展开并且在背景页面中将变得不透明。http://www.emirates.com/uk/english/index.aspx这是一个例子,如果你在页面底部看到 4 张图片,你就会明白我的意思。
提前致谢
嗨,伙计们,我正在寻找具有此动画的 div 面板,当鼠标悬停在面板上时,该面板将展开并且在背景页面中将变得不透明。http://www.emirates.com/uk/english/index.aspx这是一个例子,如果你在页面底部看到 4 张图片,你就会明白我的意思。
提前致谢
这是一个类似的解决方案:
html:
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js" type="text/javascript"></script>
<img id="smallBall" src="http://upload.wikimedia.org/wikipedia/commons/thumb/5/5a/Button_Icon_BlueSky.svg/300px-Button_Icon_BlueSky.svg.png" />
<img id="animateBall" src="http://upload.wikimedia.org/wikipedia/commons/thumb/5/5a/Button_Icon_BlueSky.svg/300px-Button_Icon_BlueSky.svg.png" />
javascript:
$('#smallBall ').mouseenter(function() {
$(this).animate({
opacity: "0.3",
filter: "alpha(opacity=30)"
}, 500);
$('#animateBall ').animate({
height: 100,
width: 100,
left: "+=25",
top: "+=25"
}, 500);
});$('#smallBall ').mouseleave(function() {
$(this).animate({
opacity: "1.0",
filter: "alpha(opacity=100)"
}, 500);
$('#animateBall ').animate({
height: 0,
width: 0,
left: "-=25",
top: "-=25"
}, 500);
});
在这里试试。
顺便说一句:我很快就一起完成了这个,所以我没有解决导致 mouseLeave 事件误报的问题。在目标上更明确定义的边界将解决我想象的这个问题。
您也可以在单击此处切换它。