0

こんにちは、このロゴに簡単なマウス オーバー アニメーションを作成するにはどうすればよいですか? 私が望むのは、id ロゴが 300px 下がる可能性があり、その中にリンクをナビゲーションとして配置することです

<body>
<div class="content">
    <div id="logo"><img src="http://upload.wikimedia.org/wikipedia/en/thumb/4/45/Google-Wallet-logo.svg/283px-Google-Wallet-logo.svg.png" alt="" /></div>
    <h1 class="title">Hello Moto</h1>
</div>
</body>

フィドル

4

2 に答える 2

1

mouseenter と leave を使用する

ホバー時にテキストを移動する Fiddle の実例: http://jsfiddle.net/hzbRb/1/

 $('#logo').mouseenter(function(){
     $('.content > h1').css('marginTop','30px')
 }).mouseleave(function(){
     $('.content > h1').css('marginTop','0px') 
 });
于 2013-09-14T09:13:45.773 に答える
0

この CSS を変更します

#logo {
    background: #f8b133;
    width: 200px;
    height: 200px;
    max-height: 500px !important; // this is critical!!
    margin: 0 auto;
    z-index: 1;
}

jQuery

$("#logo").on('mouseover', function () {
    $("#logo").animate({
        opacity: 0.95,
        height: "+=300"
    }, 250, function () {
        // Animation complete.
        // Show Navigation
    });
});
$("#logo").on('mouseleave',function () {
    // Hide Navigation
    $("#logo").animate({
        opacity: 1,
        height : "-=300"
    }, 250, function() {
    });
 });

.one()少し不透明にしたので、ナビゲーションが少し見やすくなり、マウスオーバーのたびに下に移動し続けないように委任 を使用していることに気付くでしょう。編集後 アニメーションの実行速度が少し速くなり、CSS を変更する限り、1 回に制限されるのではなく、必要な回数ホバーして離れることができるようになります。

working jsFiddle

于 2013-09-14T09:18:33.140 に答える