0

ある時点でちょっと立ち往生しています。そのため、背景画像にカーソルを合わせると大きくなります。しかし、その画像にテキストを配置すると、アニメーションがうまく機能しません。私のコードをお見せしましょう。

HTML

<div class="resize">
    <a id="apply" href="" target="_blank">
        <!--<h1 class="grow">Search & Apply</h1>-->
        <img class="title" src="images/search_inactive1.png">
    </a>
</div>

Jクエリ

$('.title').hover(function(){
    $(this).animate({ width: "+=40",height: "+=40",top: "-=20",left: "-=20"}, 130);                             
}, 
function(){
    $(this).animate({ width: "-=40",height: "-=40",top: "+=20",left: "+=20"}, 200);                      
});

CSS

.resize img {
    position: relative;
    width: 110px;
}

テキストをアニメーション化せず、背景画像のみをアニメーション化するように jquery に指示する方法はありますか。

前もって感謝します。

JSfiddle リンクhttp://jsfiddle.net/jHeDQ/3/

4

2 に答える 2

1

テキストがその上に配置されるため、セレクターを画像だけではなくコンテナーに設定します。

$('.resize)

それ以外の

$('.title')

JSフィドル

====編集====

さらに明確にするために、.stop() メソッドを使用して、マウスが出入りするたびにアニメーションが再生されるのを回避し、アニメーションが「壊れた」状態になることを回避しました。

.find() メソッドを使用して、クラス .title を持つ子を検索しました。

于 2013-07-12T11:29:24.713 に答える
0

または、JavaScript を削除して (IE<=8 のサポートが必要ない場合)、css 変換を使用できます。

.resize .title { 
    position: relative; 
    width: 110px; 
    transition: all .3s ease-out;
    transform-origin: 50% 50%;
}
.resize:hover .title { transform: scale(1.3); }

完全なフィドルの例はこちら

于 2013-07-12T11:57:36.173 に答える