.net - 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 的所有元素类(class)。那是一个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是有道理的。 .

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() 中有两个函数。第一个是当我们将鼠标悬停在 box 上时发生的情况。第二个是当我们鼠标移开时会发生什么。当我们将鼠标悬停在 div 上时，text滑落下来。当我们停止悬停时，它会向上滑动。

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

您可以看到each正在工作this jsFiddle example 。请注意所有三个图像都有自己的滑动文本。

引用文献:

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