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

所以我试着创建幻灯片向上向下的效果，如本例所示

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

我希望“段落”仅在鼠标位于其上方时显示，而不是在页面首次加载时显示

我是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");
    });

  });
}

---

什么是“text.css”？

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

<代码>

…

以下是您的代码的外观：

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

$.fn.showFeatureText=函数（）{
返回此.each（函数（）{
变量框=$（此）；
var text=$（'p'，this）；
box.hover（函数（）{
文本。向下滑动（“慢速”）；
}，函数（）{
text.slideUp（“快速”）；
});        
});
}
$（文档）.ready（函数（）{
$（'.feature_box'）。showFeatureText（）；
});

（请确保根据需要编辑CSS）。它与上的代码相同，粘贴了问题副本中的HTML

---

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

以下是a

逐步通过代码

首先，我们使用以下命令从匿名函数内部调用该方法：

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

因为，

showFeatureText

是

$（“.feature\u box”）的一种方法

我们知道，每次在DE

showFeatureText

中使用

这个

时，

这个

是指所有具有

feature\u 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");
        });
    });
}

好的，

返回这个。必须包括每个（function（）{…}）

，以便该函数能够很好地处理jQuery选择。在本例中，我们的jQuery选择是一个带有类

feature\u box

的DIV，但请注意，即使将该函数作为方法添加到选择了许多元素的jQuery选择中，该函数也会工作，因为它使用

返回该值。each（）

。无论如何，只要知道必须包括这一点就足够了，它允许您将

.showFeatureText

链接到

$（'.feature_box'）

。好的，继续

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

为了方便起见，这两行只定义了两个局部变量<代码>框是

$（此）

，在本例中是

。因此，将其称为

box

是有意义的

文本是div中的段落。这是因为

（'p'，This）

选择

This

中的所有段落，而

This

是

功能框

div。它是jQuery的基本语法。要在该范围内选择所有这些，请使用：

$（this，that）

。这有点混乱，因为要选择id

a

和id

b

您将使用完全不同的

$（“#a，#b”）

。注意引号

所以现在，

box

与我们的大div

同义。feature\u box

，而

text

与里面的文本同义

让我们继续：

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

我们只需将

feature\u框中的所有段落设置为不可见<代码>文本

是段落

.css（）

为它们指定css样式。它定位了他们。最后，

hide（）

使它们不可见。CSS定位将在页面的整个生命周期内保持有效。如果没有它，这些段落就会在照片下面

好的，现在文本都隐藏了，我们将向div添加一些事件处理程序。换句话说，我们希望这样做，如果我们将鼠标悬停在

this

上，它是

$（'.feature\u box'）

，

.feature\u box

div，那么文本就会出现。我们还希望在不悬停时隐藏所有内容：

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

注意hover（）中有两个函数。第一个问题是当我们将鼠标移到

框上时会发生什么。第二个问题是当我们鼠标离开时会发生什么。当我们将鼠标悬停在div上时，
文本
向下滑动。当我们停止悬停时，它会向后滑动

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

您可以在上看到每个

正在工作。请注意，所有三个图像都有自己的滑动文本

参考资料：

---

看起来你一开始并没有拉上div.@Peter。段落是隐藏的，而不是div。他需要标题保持可见。太好了。thnx:）工作正常。但现在还有另一个问题。我希望只有当鼠标悬停在“购物车详细信息”链接上时，段落才会显示但是当我将鼠标移到整个DIV标签区域上时，就会出现段落。我只想在鼠标移到“Cart Details”这两个词上时才看到段落。不知道如何解释……我如何才能做到这一点？我试着设置div标签的宽度，但它不起作用。它使段落以及链接“Cart details”出现在左侧。这很奇怪。有什么建议吗？在这种情况下，使用

是不好的做法，因为搜索引擎会认为文本是不可见的，那么文本阅读器呢？相反，您可以像示例页面一样使用

text.css（{position:'absolute'，top:'57px'}）@Peter，天哪。页面上有很多图像，按照示例的方式，您将看到最初显示的所有文本，然后隐藏，导致闪烁。一、两张图片可能看不到，如果有很多图片，你肯定会看到。@happysoul是的
text.css（{position:'absolute'，top:'57px'}）。hide（）
定位和隐藏段落。它相当于
$（'p'，this）.css（{position:'absolute'，top:'57px'}）.hide（）
。这很重要
text.css({ position: 'absolute', top: '57px' }).hide();

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