2

背景画像がゆっくりと変化するホバーアクションを作成しようとしています。

.menu_part
{
    border-left: 1px solid black;
    background-image: url(../images/bg_menu.png);
    float:left;
    padding: 2px 10px;
}

.menu_part:hover
{
    background-image: url(../images/bg_menu_hove.png);                            
    color: #FFF;
}

メニュー：

<div id="head_menu">
    <a href="#order"><div>make order</div></a>
    <a href="#portfolio"><div>portfolie</div></a>
    <a href="#contacts"><div>contacts</div></a>
    <a href="#vacancies"><div>vacancies</div></a>
    <a href="#about"><div>about company</div></a>
</div>

いくつかの JQuery:

$('#head_menu a').addClass('menu_part');

今、セレクター $('#head_menu a') のホバーアクションを書き込もうとしています。ホバーするときに必要に応じて bg-image をゆっくりと変更できますか?

これが私の試行コードです:

    $("#head_menu a").hover(
        function() {
            $(this).animate({backgroundImage: 'url(images/bg_menu_hove.png)', color: '#fff'}, 1000);
        },
        function() {
            $(this).animate({backgroundImage: 'url(images/bg_menu.png)', color: '#000'}, 1000);                
        }
    );

しかし、今ではメニューも表示されません。私は何を間違えましたか？また、bg-position も使用してみます。

これは bg-position を含むコードですが、理解できません。bg_menu.pngとbg_menu_hove.pngを 200px+200px の 1 つの画像にマージしました。上記のスタイルは、JQuery がなくても機能しません。

.menu_part:hover
{
    background-image: url(../images/new_menu.png);
    background-position: 0 -200px;
}
4

2 に答える 2

3

まず、背景が変化するホバー効果の標準的なテクニックは、両方の写真を結合することです。後は、背景の位置をいじるだけbg_menu_hove.pngです。bg_menu.png

divタグから削除しaます (div はブロック要素で、a はインラインです... 逆の場合もあります)。

画像が 1 つしかない場合は、もちろん ( ) のanimate関数などを使用します。素敵な例を見てみましょう。ビギナーにとって本当に便利なサイトです: http://visualjquery.com/ (クリック: )jQuerybackgroundPositionEffects -> Custom -> Animate

于 2009-10-02T16:23:31.233 に答える
1

jquery animate関数と、CSS へのいくつかのわずかな変更を使用してこれを行うことができると思います-次のようなもの:

.menu_part
{
    border-left: 1px solid black;
    background-image: url(../images/bg_menu_hove.png);
    float:left;
    padding: 2px 10px;
}

.menu_part div
{
    background-image: url(../images/bg_menu.png);                            
    color: #FFF;
}

その後：

$('#head_menu a').addClass('menu_part');

$('.menu_part').bind('mouseover', function() {

    $(this).find('div').animate({ 
        opacity: 0
      }, 1500 );

});

$('.menu_part').bind('mouseout', function() {

    $(this).find('div').animate({ 
        opacity: 1
      }, 1500 );

});

申し訳ありませんが、現時点ではテストできませんでしたが、基本的なアイデアは理解できました。

于 2009-10-02T16:19:18.727 に答える