jquery - アニメーション分割パネル

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

ここで試してみてください。

ところで：私はこれを非常に迅速に処理したので、mouseLeaveイベントで誤検知を引き起こす問題に取り組みませんでした。ターゲット上でより明確に定義された境界は、私が想像するこの問題を修正します。

オンに切り替えることもできますここをクリックしてください。