jQuery初学者问题：关于向上/向下滑动效果的疑问

Question

所以我尝试创建类似于这个例子中的上下滑动效果，

http://paulsturgess.co.uk/articles/show/83-jquery-text-slide-up-slide-down-effect

问题是，它会在网页打开时显示文本。

我希望“段落”只在鼠标悬停在其上时显示，而不是在页面首次加载时显示。

我完全不了解jQuery，但我想让它工作。

帮帮我？

我的脚本

<script type="text/javascript">

   $(function(){
  $('.feature_box').showFeatureText();
})

$.fn.showFeatureText = function() {
  return this.each(function(){
    var box = $(this);
    var text = $('p',this);

   // text.css({ position: 'absolute', top: '57px' }).hide();

    box.hover(function(){
      text.slideDown("slow");
    },function(){
      text.slideUp("fast");
    });

  });
}

HTML内容

<div>
    <div class="feature_box" align="right">
        <h2><a href="#">Cart Details</a></h2>
        <p>
        <a href="#">Excepteur sint occaecat cupidatat non proident. <BR />
        Qui officia deserunt mollit anim id est laborum<br />
        Excepteur sint occaecat cupidatat non proident. <BR />
        Qui officia deserunt mollit anim id est laborum</a></p>
    </div>
</div>

我应该做哪些更改，才能使段落在页面首次加载时不会默认显示？

此外，鼠标悬停效果是在

标签还是

标签上？我有点困惑。抱歉，我真的很新手。

[编辑]

我刚刚做了一些更改，页面首次加载时没有显示段落。

以下行已被注释掉。

// text.css({ position: 'absolute', top: '57px' }).hide();

同样，鼠标悬停效果在

标签还是

标签上？

[编辑2]

以下代码行包含jQuery的某些函数吗？

text.css({ position: 'absolute', top: '57px' }).hide();

什么是"text.css"？

- Serenity

---

@happysoul 是的。text.css({ position: 'absolute', top: '57px' }).hide() 这段代码既定位又隐藏了你的段落。它相当于 $('p',this).css({ position: 'absolute', top: '57px' }).hide()。这很重要。请查看我答案中的代码示例。 - Peter Ajtai

Answer 1

首先，你需要将<p>隐藏起来：<p style="display:none;">...</p>

以下是你的代码应该如何编写：

<script type="text/javascript">
    $.fn.showFeatureText = function() {
        return this.each(function(){    
            var box = $(this);
            var text = $('p',this);    
            box.hover(function(){
              text.slideDown("slow");
            },function(){
              text.slideUp("fast");
            });        
          });
    }

    $(document).ready(function() {
      $('.feature_box').showFeatureText();    
    });
</script>

<div>
    <div class="feature_box" align="right">
        <h2><a href="#">Cart Details</a></h2>
        <p style="display:none;">
        <a href="#">Excepteur sint occaecat cupidatat non proident. <BR />
        Qui officia deserunt mollit anim id est laborum<br />
        Excepteur sint occaecat cupidatat non proident. <BR />
        Qui officia deserunt mollit anim id est laborum</a></p>    
    </div>
</div>

- Strelok

---

看起来你没有最初拉起那个div。 - Peter Ajtai

@Peter。段落被隐藏，而不是 div。他需要标题保持可见。 - Strelok

太好了，谢谢 :) 它正常工作了..但现在有另一个问题..我希望当鼠标悬停在“购物车详情”链接上时，段落只出现在那里，但是当我将鼠标移动到整个DIV标记区域时，该段落也会出现。我只想让这段话在鼠标悬停在“购物车详情”这两个单词上时才出现。不知道还有什么其他的解释...我该如何实现？我尝试设置div标记的宽度，但它没有起作用...它使段落以及“购物车详情”链接都出现在左侧...这很奇怪...有什么建议吗？ - Serenity

在这种情况下，使用<p style="display:none;">是不好的做法，因为搜索引擎会认为文本是不可见的，那么对于文本阅读器呢？相反，您可以像示例页面一样使用text.css({ position: 'absolute', top: '57px' }).hide();。 - Peter Ajtai

@Peter，呃。页面上有很多图片，如果按照示例的方式做，你会看到所有文本最初都显示出来，然后被隐藏，导致闪烁。一个或两个图片可能不会被注意到，但如果有很多图片，肯定会看到这种情况。 - Strelok

Answer 2

这是购物车的可工作代码（确保您将CSS编辑为所需样式）。它与示例页面上的代码相同，其中包含从您的问题复制粘贴的HTML。

---

好的，现在让我们浏览一下代码。

以下是示例页面中的原始代码，在jsFiddle example中。

逐步分析代码...

首先，我们使用匿名函数调用该方法：

$('.feature_box').showFeatureText();

由于`showFeatureText`是`$('.feature_box')`的一个方法，因此我们知道每次在`showFeatureText`中使用`this`时，`this`指的是所有具有`feature_box`类的元素。在您的情况下，这是一个文本框。

现在让我们进入`showFeatureText`。它被用作一个简短的jQuery插件。它是jQuery的一个方法：

$.fn.showFeatureText = function() {
    return this.each(function(){    
        var box = $(this);
        var text = $('p',this);

        text.css({ position: 'absolute', top: '57px' }).hide();

        box.hover(function(){
            text.slideDown("fast");
        },function(){
            text.slideUp("fast");
        });
    });
}

好的，return this.each(function(){...}) 必须包含在函数中，以便该函数与 jQuery 选择器良好地配合使用。在本例中，我们的 jQuery 选择器是一个带有类名为 feature_box 的 DIV，但请注意，即使将此函数作为方法添加到选择了许多元素的 jQuery 选择器中，它也可以正常工作，因为它使用了 return this.each()。无论如何，只需要知道必须包括这一点，并且它允许您将 .showFeatureText 链接到 $('.feature_box') 上。好的，继续进行。

        var box = $(this);
        var text = $('p',this);

这两行代码只是为了方便定义了两个局部变量。其中，box 是 $(this)，在这种情况下是指 <div class="feature_box">。因此将其称为 box 是有意义的。

text 是 div 中的段落文本。这是因为 ('p', this) 选择了 this 内的所有段落，而 this 是 feature_box div。这是 jQuery 的基本语法。要在其中选择全部内容，请使用： $(this, that)。这有点令人困惑，因为要选择 id a 和 id b，则需要使用完全不同的方式：$("#a, #b")。请注意引号。

因此，现在 box 与我们的大 div .feature_box 同义，而 text 与其中的文本同义。

让我们继续：

text.css({ position: 'absolute', top: '57px' }).hide();

我们只需使 feature_box div 中的所有段落不可见。其中 text 是指段落。.css() 分配 CSS 样式给它们，并定位它们。最后，hide() 使它们不可见。CSS 定位基本上在页面的整个生命周期内都会保持有效。如果没有它，这些段落将在照片下面。

好的，现在文本全部隐藏了，我们要为我们的 div 添加一些事件处理程序。换句话说，我们希望当我们悬停在 this，即 $('.feature_box')，也就是 .feature_box div 上时，文本会出现。我们还希望在未悬停时隐藏所有内容。

    box.hover(function(){
        text.slideDown("fast");
    },function(){
        text.slideUp("fast");
    });

注意hover()中有两个函数。第一个是当我们鼠标悬停在box上时发生的事情。第二个是当我们鼠标移开时发生的事情。当我们悬停在div上时，文本会向下滑动。当我们停止悬停时，它会向上滑动。

这就是一个用于滑动内容的jQuery插件。

您可以在这个jsFiddle示例中看到each的运作方式。请注意，所有三个图像都有自己的滑动文本。

参考资料：

jQuery选择器
.hide()
.hover()
.slideDown()
.slideUp()
.each()
编写jQuery插件

- Peter Ajtai