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

对于初学者来说，首先应该隐藏<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>

Answer 2

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。在您的情况下，这是一个$.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"); }); }); }。文本框。

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

return this.each(function(){...})

好的，必须包含feature_box，以便该函数可以很好地与jQuery选择一起使用。在这种情况下，我们的jQuery选择是一个带有类return this.each()的DIV，但请注意，即使将此函数作为方法添加到选择了多个元素的jQuery选择中，该函数也会起作用，因为它使用{{1} }。无论如何，只要知道必须包含这一点就足够了，这就是允许你将.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是paragaphs。 .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

关于上滑/下滑效果的jQuery初学者问题

2 个答案: