3

行ごとに 2 つの div があり、それぞれ 45% の Web サイトで作業しています。行のDIVにカーソルを合わせると、その行の他のDIVが、ホバーされたDIVが拡大すると縮小し、ホバーが離れると元に戻るように設定したいと思います。縮小する DIV は、行のホバーされた DIV の前または後にある可能性があり、それが私が立ち往生している場所です。

HTML は以下のようになり、何度も繰り返されます。

<div class="row">
    <div class="cell upcoming">
        <img src="stills/press/press-logo-gdc2013.jpg" class="general"><p class="one">Panelist - Game Developers Conference 2013</p>
        <p class="two">[Panel Name TBD]</p>
        <p class="three"><b>Panel Date/Location:</b> [TBD] on March 25-29, 2013 at GDC (San Francisco, California)</p>
        <p class="three"><b>Panelists:</b> [TBD]</p>
        <p class="three"><b>Panel Blurb:</b> [TBD]</p>
    </div>

    <div class="cell upcoming">
        <img src="stills/press/press-logo-wizard-world-st-louis.jpg" class="general"><p class="one">Panelist - Wizard World St. Louis 2013</p>
        <p class="two">[Panel Name TBD]</p>
        <p class="three"><b>Panel Date/Location:</b> [TBD] on March 22-24, 2013 at Wizard World (St. Louis, Missouri)</p>
        <p class="three"><b>Panelists:</b> [TBD]</p>
        <p class="three"><b>Panel Blurb:</b> [TBD]</p>
    </div>
</div>

「行」の CSS はありませんが、「セル」の CSS は

div.cell { position:relative; margin:2px; float:left; width:45%; text-align:justify; vertical-align:top; border:2px solid; padding:10px; border-radius:25px; -moz-border-radius:25px; }

部分的な JQUERY は次のとおりです。

 $('.cell')
    .on('mouseenter', function(){
        $(this).animate ({width:"75%"},"slow);
    })
    .on('mouseleave', function(){
        $(this).animate ({width:"45%"},"slow);
    });

もちろん、「行」の他の「セル」(左または右) を縮小して、他のセルが成長しているようにしたいのですが、「その行の他の DIV」の識別子を特定する方法がわかりません。 " または 2 つのものを同時にアニメーション化します。

助けていただければ幸いです。

4

2 に答える 2

1

siblings()この場合、他の.cell要素を取得するために使用できます。

$('.cell')
    .on('mouseenter', function(){
        $(this).animate ({width:"75%"},"slow").siblings('.cell').animate({'width': '15%'}, "slow");
    })
    .on('mouseleave', function(){
        $(this).add($(this).siblings('.cell')).animate ({width:"45%"},"slow");
    });
于 2013-02-05T18:26:18.950 に答える
0

アコーディオン効果は次のとおりです。http：//components.developers4web.com/accordion-effect#TSAccordionHead695732

これで遊ぶこともできます：http ：//www.w3schools.com/jquery/eff_fadeout.asp

于 2013-02-05T18:36:15.370 に答える