-1

divがホバーされたときに展開するには、divの背景画像が必要です。これを行う最善の方法は何ですか？

滑らかなアニメーションである必要があります。理想的には JQuery を使用したいのですが、コーディングに非常に慣れていないので、使用できる既製のコードはありますか?

私はちょうどこのコードを作成しました。役立つことを願っています

<img class="wooll" src="/images1" style="position: absolute; margin: 0 0 0 20px;" />

<img  style="" src="/images2" class="grow"/>


$(".wooll, .grow").hover(function() {
   $('.grow').animate({
        'height': $(this).height() * 1.4,
        'width': $(this).width() * 1.4
    });
}, function() {
    $('wool, .grow').animate({
        'height': $(this).height() / 1,
        'width': $(this).width() / 1
    });
});​
4

3 に答える 3

0

CSS3を使用すると、FlashアニメーションやJavaScriptを使用せずに、純粋なcssのみを使用して、あるスタイルから別のスタイルに変更するときに効果を追加できます。

デモを見る：-DEMO1

デモを見る：-DEMO2

これがお役に立てば幸いです

HTML

<div>
</div>

CSS

div {
width:100px;
height:100px;
background:red;
}
div:hover {
width:200px;
height:200px;
background:yellow;
  -webkit-transition: all 0.5s ease;
-moz-transition: all 0.5s ease;
-o-transition: all 0.5s ease;
}
于 2012-11-26T10:40:26.123 に答える
0

以下は、構文の非常に基本的な例と実際の例です。

$("#mydiv").mouseover(function(){
    $("#mydiv").animate({width: '200', height: '200'},200);
});

JQuery APIのanimate 関数について読んで、フレームワークの機能を調べることを強くお勧めします。

于 2012-11-26T10:36:50.343 に答える
0

やり方はとっても簡単！ スムーズな遷移のために CSS3 を使用できます。これを CSS の背景に適用するだけです。

-webkit-transition: all 0.5s ease;
-moz-transition: all 0.5s ease;
-o-transition: all 0.5s ease;

次に、ホバー

div:hover .background {
background-size: cover /* or you can use width/height */
}

JSFiddle での作業例: http://jsfiddle.net/AVyQc/3/

于 2012-11-26T10:37:30.860 に答える