2

アニメーション化されたタブがあり、リンクにカーソルを合わせるとh2(スライド アニメーションを起動するため)、アコーディオンのようにスライド効果を上下にアニメーション化します。

<div class="slideBox">
    <div class="pane"><img src="images/homepage/sm1.jpg" alt="Room" /></div><!--pane-->
    <h2 class="drkbluebg" style="border-bottom:7px solid #fff;">
        <b>main title</b>
        <br />
        photo caption
    </h2>
    <div class="pane" style="display:block;">
        <img src="images/homepage/sm2.jpg" alt="Room" />
    </div><!--pane-->
    <h2 class="current greybg"><b>main title</b><br/>photo caption</h2>
</div><!--slideBox-->

ただし、アニメーションは停止しません。アコーディオン効果（スライド効果）が鳴り続けます。これを修正する方法はありますか？

(ちなみにここまではjQuerytoolsでやってみましたが、他に解決策があれば提案よろしくお願いします)

これはJSコードです：

$(function() {
    $(".slideBox").tabs(".pane", {tabs: 'h2', effect: 'slide', event: 'mouseover'});    
});

ここに私がしたことへのリンクがあります http://www.ixpander.com/simulation/so_issue/

4

2 に答える 2

0

マウスが移動するたびにではなく、マウスが最初に要素に入ったときにのみ起動するように、mouseenter代わりに試してくださいmouseover

$(".slideBox").tabs(".pane", {tabs: 'h2', effect: 'slide', event: 'mouseenter'});
于 2012-10-11T19:28:02.367 に答える
0

クラスとCSSで使用します：

<style>
.pane{
   height:0;
   overflow:hidden;
}

.pane.active{
   height:100px;
}

</style>

そして、次のように jQuery を使用してクラスを追加します。

<script>
$(document).ready(function() {
    $(".slideBox").on('hover', function(){
      $(this).prev('.pane').addClass('active');
    });
}
</script>
于 2012-10-11T19:32:43.077 に答える