SlideOut/In 函数上的 jQuery 语法问题

Question

我知道这很简单，只需画一个空白即可。

如果您查看此页面（所有 JS/CSS 都在一页上），http: //dl.dropbox.com/u/904456/expander.html

你可以看到我有什么。基本上我想做两件不同的事情。

A.) 我只想显示悬停的 .module 的 .module .caption，而不是在其中一个悬停时显示两者。 B.）我想要幻灯片输出而不是简单的 .show() 和幻灯片输入，而不是简单的 .hide() （悬停和取消悬停时）。

$(document).ready(function() {
  $(".module .caption").hide();
  $(".module").hover(function() {
    $(".module .caption").show(); 
    },function() {
    $(".module .caption").hide();   
  });
});

我的标记如下所示：

 <div class="module span-1">
      <div class="inside">HOVER</div><!-- end .inside -->
        <h1>TITLE</h1>
        <div class="caption">
          <p>Caption ipsum lorem dolor ipsum lorem dolor ipsum lorem dolor ipsum lorem dolor</p>
        </div><!-- end .caption -->
    </div><!-- end .module -->

 <div class="module span-2">
  <div class="caption">
          <p>Caption ipsum lorem dolor ipsum lorem dolor ipsum lorem dolor ipsum lorem dolor</p>
      </div><!-- end .caption -->
      <div class="inside">HOVER</div><!-- end .inside -->
        <h1>TITLE</h1>
    </div><!-- end. module -->

希望得到一些帮助！如果您感觉特别慷慨，请解释一下您的方法（下次）。谢谢！

Answer 1

通过调用 $(".module .caption").show(); 您可以在具有 module< 类的元素内显示具有 caption 类的所有元素/代码>。相反，您想要使用有问题的元素（已悬停的元素），您可以使用 $(this) 引用该元素。然后，您只需按照自己的意愿进行切换即可。请参阅 jQuery 效果 API 了解您的选项。这是获得所需效果的一种方法：

 $(document).ready(function() {
  $("div.module div.caption").hide();
  $("div.module").hover(function() {
     $(this).find("div.caption").slideDown(); 
   },function() {
     $(this).find("div.caption").slideUp();   
   });
 });

编辑：通常最好使用 $('.className') 形式的选择器，而不是使用 $('.className') 形式的选择器>$('tag.className')，因为此选择器将使用本机 Javascript 方法 getElementsByTagName，而不是循环遍历 DOM 中的所有元素来查找具有给定类的元素。