关于上/下滑动效果的 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({ position: 'absolute', top: '57px' }).hide();

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

[编辑 2]

下面这行代码是不是包含了jQuery的一些功能还是什么？

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

什么是“text.css”？

Answer 1

Here is the working code for the shopping cart（确保根据需要编辑 CSS）。它与example page 上的代码相同，其中粘贴了您问题副本中的 HTML。

---

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

这是来自示例页面的原始代码，位于
jsFiddle example

单步执行代码...

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

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

由于showFeatureText 是$('.feature_box') 的一个方法，我们知道每次this 被用于insde 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 选择中，这个函数也可以工作，因为它使用了return this.each()。无论如何，知道必须包含它就足够了，这就是允许您将.showFeatureText 链接到$('.feature_box') 的原因。好的，继续。

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

这两行只是为了方便定义了两个局部变量。 box 是 $(this)，在这种情况下是 <div class="feature_box">。所以称它为box 是有意义的。

文本是 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 上时，text 会向下滑动。当我们停止悬停时，它会向上滑动。

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

您可以在this jsFiddle example 上看到each。请注意所有三张图片都有自己的滑动文本。

参考资料：

jQuery selectors
.hide()
.hover()
.slideDown()
.slideUp()
.each()
authoring jQuery plugins

Answer 2

首先你应该隐藏<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>