jquery - mouseenterでのjQueryUIスライド効果

Question

私はここ数日ここにいるので、どんな助けでも大歓迎です。2つのdivが重なり合っているリンクがあります。上のdivは非表示になっていますが、スライドして下のdivを部分的に覆い、mouseenter次に再び外に移動しmouseleaveます。ある程度は機能していますが、少しバグがあります。これは私がjQueryのために持っているものです（私はデモとドキュメントからまとめました）：

$(document).ready(function(){
    $(".toggle").bind("mouseenter",function(){
        $("> :eq(0)", this).show("slide", { direction: "down" });
    }).bind("mouseleave",function(){
        $("> :eq(0)", this).hide("slide", { direction: "down" });
    });
});

これはページ構造です（ワードプレスページです）

<div <?php post_class() ?> id="post-<?php the_ID(); ?>">
  <a href="<?php the_permalink(); ?>" class="toggle">
    <div id="slide" class="post-info" style="display: none;">
      <h1><?php the_title(); ?></h1>
      <ul>
        <li>more info here</li>
        <li>more info here</li>
      </ul>
    </div>
    <div class="post-image">
      <img src="<?php post_image('', false, false); ?>" width="275" height="155" />
    </div>  
  </a>
</div>

Answer 1

このようなことを試してください。

$(document).ready(function(){
    $(".toggle").bind("mouseenter",function(){
        $("#slide").slideDown("slow");
        $("#post-image").slideUP("slow");
    }).bind("mouseleave",function(){
        $("#slide").slideUP("slow");
        $("#post-image").slideDown("slow");});
    });
});

Answer 2

Birk に感謝しますが、上部の div がスライドインして下部の div を部分的にカバーするため、スライドアウトする必要はありません。ただし、構文を試して、改善があるかどうかを確認します。

- 編集 -

魅力的でした。再度、感謝します。

Answer 3

jquery のアコーディオン プラグインも参照してください。