Question

嗨大家我正在寻找具有此动画的div面板，当鼠标在面板上时会扩展，并且在后台页面中将获得不透明度。 http://www.emirates.com/uk/english/index.aspx这里有一个例子，我想说的是如果你在页面底部的4个图片中你会明白我的意思..

提前致谢

Answer 1

这是一个类似的解决方案：

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);
});

试试here.

顺便说一下：我很快就通过这个，所以我没有解决导致mouseLeave事件误报的问题。目标上更明确定义的边界将解决我想象中的这个问题。

您还可以点击 here.

切换它

动画Div Panel

1 个答案: