Question

我已经在这几天了，所以任何帮助都会非常感激。我有一个包含两个div的链接。顶部div是隐藏的，但是滑入以部分覆盖mouseenter上的底部div，然后再次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" });
    });
});

这是页面结构（它是一个wordpress页面）

<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

的accordion插件

对mouseenter的jQuery UI幻灯片效果

3 个答案: