mouseenter 上的 jQuery UI 滑动效果

发布于 2024-07-13 04:21:32 字数 1131 浏览 11 评论 0原文

我已经这样做了几天了，所以任何帮助将不胜感激。我有一个链接，其中包含两个彼此叠置的 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>

原文

I've been at this for a couple of days now, so any help would be much appreciated. I've got a link which contains two divs sitting on top of each other. The top div is hidden, but slides in to partially cover the bottom div on mouseenter, and then out again on mouseleave. It is working to a degree, but is a bit buggy. This is what I have for the jQuery (which I've pieced together from the demos and the documentation):

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

and this is the page structure (it's a wordpress page)

<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>

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

霞映澄塘 2024-07-20 04:21:32

尝试这样的事情。

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

Try something like this.

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

回复收藏 0 原文