JQuery效果

JQuery效果

• 隐藏和显示 show（）、hide（）

可以通过jQuery使用show（）、hide（）方法来隐藏和显示HTML元素

例：

$("#hide").click(function(){

  $("div").hide();

});



$("#show").click(function(){

  $("div").show();

});

1.hide（）

语法：$(selector).hide(speed,callback);

Speed：三种预定速度（slow,normal,fast）之一，或表示动画时长（单位毫秒：1秒=1000毫秒）；

Callback:动画完成时执行的函数

1. show（）

语法：$(selector).show(speed,callback);

参数说明同上；

1. toggle（）

通过toggle（）可以切换hide（）和show（）；显示（隐藏）被隐藏（显示）的元素。

例：

$("button").click(function(){

  $("div").toggle();

});

语法：语法：$(selector).toggle(speed,callback);

参数说明同上；

• 淡入淡出fading

Fade有四种方法：

1. fadeIn（）用于淡入以隐藏的元素
2. fadeOut（）
3. fadeToggle（）
4. fadeTo（）

1. fadeIn（）用于淡入以隐藏的元素

语法：$(selector).fadeIn(speed,callback);

Speed：三种预定速度（slow,fast）之一，或表示动画时长（单位毫秒：1秒=1000毫秒）；

Callback:动画完成时执行的函数

例：

$("button").click(function(){

  $("#div1").fadeIn();

  $("#div2").fadeIn("slow");

  $("#div3").fadeIn(3000);

});

1. fadeOut（）用于的淡出可见元素

语法：$(selector).fadeIn(speed,callback);

参数说明同上；

1. fadeToggle（）在fadeIn（）和fadeOut（）之间切换

如果元素已淡出，则 fadeToggle() 会向元素添加淡入效果。

如果元素已淡入，则 fadeToggle() 会向元素添加淡出效果。

语法：$(selector).fadeToggle（）(speed,callback);

参数说明同上；

1. fadeTo（）允许渐变为给定的不透明度

语法：$(selector).fadeTo（）(speed,callback);

参数说明同上；

例：

（1）用600毫秒缓慢的将段落的透明度调整到0.66，大约2/3的可见度

$("p").fadeTo("slow", 0.66);

（2）用200毫秒快速将段落的透明度调整到0.25，大约1/4的可见度，之后弹出一个对话框

$("p").fadeTo("fast", 0.25, function(){

   alert("Hello");

 });

三、滑动（使元素上下滑动）

1.slideDown（）向下滑动

语法：$(selector).slideDown(speed,callback);

可选的 speed 参数规定效果的时长。它可以取以下值："slow"、"fast" 或毫秒。

可选的 callback 参数是滑动完成后所执行的函数名称。

1. slideUp()向上滑动

语法：$(selector).slideUp(speed,callback);

参数说明同上；

3.slideToggle()可在slideDown（）和slideUp（）之间切换

如果元素向下滑动，则 slideToggle() 可向上滑动它们。

如果元素向上滑动，则 slideToggle() 可向下滑动它们。

例：

（1）用600毫秒缓慢的将段落滑上或滑下

$("p").slideToggle("slow");

（2）用200毫秒快速将段落滑上或滑下，之后弹出一个对话框

$("p").slideToggle("fast",function(){

   alert("Hello");

 });

四、动画animate（）

1.animate（）用于创建自定义动画

语法:$(selector).animate({params},apeed,callback);

必需的 params 参数定义形成动画的 CSS 属性。

可选的 speed 参数规定效果的时长。它可以取以下值："slow"、"fast" 或毫秒。

可选的 callback 参数是动画完成后所执行的函数名称。

注意：如需对位置进行操作，要记得首先把元素的CSS position属性设置为relative,fixed或absolute,因为所有HTML元素都默认地有一个静态位置，且无法移动

1. 操作多个属性

例如：

$("button").click(function(){

  $("div").animate({

    left:'250px',

    opacity:'0.5',

    height:'150px',

    width:'150px'

  });

});

这里要注意：所有指定的属性必须用驼峰写法，比如：用marginLeft代替margin-left

1. 使用相对值

也可以定义相对值（该值相对于元素的当前值）。需要在值的前面加上 += 或 -=：

实例：

$("button").click(function(){

  $("div").animate({

    left:'250px',

    height:'+=150px',

    width:'+=150px'

  });

});

1. 使用预定义的值

可以把属性的动画设置为"show"、"hide" 或 "toggle"：

例：

$("button").click(function(){

  $("div").animate({

    height:'toggle'

  });

});

1. 队列

可编写多个animate（），会逐一运行这些代码

实例：

（1）

$("button").click(function(){

  var div=$("div");

  div.animate({height:'300px',opacity:'0.4'},"slow");

  div.animate({width:'300px',opacity:'0.8'},"slow");

  div.animate({height:'100px',opacity:'0.4'},"slow");

  div.animate({width:'100px',opacity:'0.8'},"slow");

});

1. 让指定元素左右移动

页面布局

<button id="left">«</button> <button id="right">»</button>

<div class="block"></div>

JQ代码：

$("#right").click(function(){

  $(".block").animate({left: '+50px'}, "slow");

});



$("#left").click(function(){

  $(".block").animate({left: '-50px'}, "slow");

});

• 停止动画

jQuery stop() 方法用于停止动画或效果，在它们完成之前。

stop() 方法适用于所有 jQuery 效果函数，包括滑动、淡入淡出和自定义动画。

语法：

$(selector).stop(stopAll,goToEnd);

可选的 stopAll 参数规定是否应该清除动画队列。默认是 false，即仅停止活动的动画，允许任何排入队列的动画向后执行。

可选的 goToEnd 参数规定是否立即完成当前动画。默认是 false。

因此，默认地，stop() 会清除在被选元素上指定的当前动画。