jQuery---jQuery效果

jQuery效果

1.jQuery 效果- 隐藏和显示

每个元素都有一个show()方法和hide()方法，分别是显示和隐藏。
对于利用它，比如，你可以设置一个按钮事件，对应行为分别是显示和隐藏一段文字。

当然，这个方法中是可以传递参数的，其具体格式如下：
$(selector).hide(speed,callback);

其参数的使用方法如下：

• 可选的 speed 参数规定隐藏/显示的速度，可以取以下值：”slow”、”fast” 或毫秒。
• 可选的 callback 参数是隐藏或显示完成后所执行的函数名称。

当然，这样的话需要写两个方法，很麻烦。jQuery提供了另一种方法：
toggle()方法，通过这个来设置按钮事件，对某个元素来进行隐藏，之后下一次按时则就是显示。

疑问：我们开始如何隐藏元素呢？
每个元素都会有一个style属性，在这里可以设置，例如：style="display:none".这样，就开始默认设置为不展示。

style 设置的是CSS的样式设置，具体属性你可以查看CSS相关文档。

2.jQuery 效果 - 淡入淡出

前面那个直接隐藏，显示，是有点太死板了，现在，有淡入淡出的显示效果。

有fadeIn(),fadeOut(),fadeToggle(),fadeTo()这四种方法。

意思很好理解，就不多做解释了，fadeTo是转变透明度的。

如fadeTo("slow",0.7)则表示的是将某个元素的透明度缓慢地变为0.7，这个操作是你需要理解的。

3.jQuery 效果 - 滑动

这个效果简单地说就是点击滑动，一般，我们的操作对象是区块，即<div>元素，我们定义好这个块的大小颜色和文字，然后在嵌套的效果，在里面设置好有关元素，之后，我们选择器选择这块区块，然后整体对其操作，就是这个jQuery slideDown(),jQuery slideUp(),jQuery slideToggle()方法，我们可以在其属性中设置是否展示，然后再来进行有关操作。display:none;

4.jQuery 效果- 动画

这个简单来说就是对动画进行操作。使用其animate()方法来进行操作，基础，其后面的参数需要用{}来引用起来，这种操作是你需要明确的。

$("button").click(function(){
  $("div").animate({left:'250px'});
});

估计我们这个方法用的不多，所以，这里就不多介绍了，用法和其他的方法一致，就是这个样子。

5.jQuery 停止动画

前面我们可以来设置相关动画，这个动画来运行时需要时间，所以，我们可以通过另一种方法来停止，这就是使用的stop()方法，其方法有两个参数，我们可以根据自己的需求来合理选择，当我们需要的时候，我们再来查看有关信息吧。

6.jQuery Callback 方法

这个方法是针对动画100%完成后所进行的事件。

注意，这个不是单独的一个方法，我们不需要单独调用，它是常定义在方法中的函数，如我们在在看其他方法定义时这样：$(selector).hide(speed,callback)，这里第二个参数callback就是回调方法，我们可以在第二个参数中单独设计一个函数，当这个方法完成后，来调用这一个函数，这是你需要明确的。

想这个样子：

$(".btn1").click(function(){
  $("p").hide("slow",function{
  alert("动画完成");
  });
});

这个Callback方法是很好理解的。

7.jQuery - 链(Chaining)

我们通过jQuery提供的链来一次进行多个jQuery语句，即把多个jQuery语句放在一个链上，之后一条接着一条来运行。

这样的话，浏览器不必每个jQuery语句都来全局搜索所要执行的元素，这样很好的提高了有关代码的性能。

其具体的操作是在一个选择其后面每一个方法使用一个.,来使它们相互连接，这样就能对一个选择器来进行多种方法的操作，注意，它的执行顺序是依次的，这个需要你理解。

如：

$("#p1").css("color","red").slideUp(2000).slideDown(2000);

这个是先将id="p1"的字体颜色变为红色，之后用2s完成上滑，2s完成下滑，这个顺序是依次的并且必须等到前部分执行完成，这种操作是需要你明确的。