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>

我需要进行哪些更改才能在页面首次加载时默认情况下不显示该段落？

另外，鼠标悬停效果是在 div 标签上还是在 p 标签上？我有点困惑。抱歉，我对这一切都很陌生。

[编辑]

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

以下行已被注释掉。

// text.css({ 位置: '绝对', 顶部: '57px' }).hide();

还是鼠标悬停在 DIV 标签或 P 标签上的效果？

[编辑2]

以下代码行是否包含 jQuery 的某些函数或什么？

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

什么是“text.css”？

Answer 1

这是购物车的工作代码（请确保您按照您想要的方式编辑 CSS）。它与 < 上的代码相同strong>示例页面，其中粘贴了问题副本中的 HTML。

---

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

以下是
中示例页面的原始代码
jsFiddle 示例

单步执行代码...

首先我们从内部调用该方法匿名函数使用：

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

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

现在让我们进入“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 选择中，它也会起作用，因为它使用 <代码>返回this.each()。无论如何，知道必须包含此内容就足够了，并且它允许您将 .showFeatureText 链接到 $('.feature_box') 上。好的，继续。

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

为了方便起见，这两行只是定义了两个局部变量。 box 是 $(this)，在本例中是

。因此将其称为“盒子”是有意义的。

text 是 div 内的段落。这是因为 ('p', this) 选择了 this 内的所有段落，而 this 是 feature_box分区这是 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() 中有两个函数。第一个是当我们将鼠标悬停在框上时发生的情况。第二个是当我们鼠标移出时会发生什么。当我们将鼠标悬停在 div 上时，文本 会向下滑动。当我们停止悬停时，它会滑回来。

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

您可以在这个 jsFiddle 示例each的工作情况>。请注意所有三个图像都有自己的滑动文本。

参考资料：

jQuery 选择器
.hide()
.hover()
.slideDown()
.slideUp()
.each()
创作 jQuery 插件

Answer 2

对于初学者来说，您应该首先隐藏

。

...

您的代码应如下所示：

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