2018-06-10jQuery5 分钟读完 (大约 809 个字)

jQuery学习笔记（二）

第二部分是jquery的效果。

jquery显示隐藏

jquery的效果有显示、隐藏、切换、滑动、淡入淡出、动画。

隐藏和显示

使用 hide() 和 show() 。

语法：

1 2	$(selector).hide(speed, callback); $(selector).show(speed, callback);

speed参数规定了速度，可以是slow，fast或者毫秒数。

实例：

$("#hide").click(function() {
    $("p").hide(1000， callback);
});

$("#show").click(function() {
    $("p").show(1000, callback);
});

$("#hide").click(function() {
    $("div").hide(1000, "linear", function() {
        window.alert("已经隐藏");
    });
});

缓动函数可以是linear或者swing。

toggle()

toggle() 用于切换hide()和show()。

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

1
2
3

$("button").click(function() {
    $("p").toggle();
});

tips

如果写成callback()则会立即执行函数。
callback可以是匿名函数。

jquery淡入淡出

jquery有四种淡入淡出方法。

fadeIn()
fadeOut()
fadeToggle()
fadeTo()

fadeIn()

将已经隐藏的元素淡入地显示。

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

实例：

$("button").click(function() {
    $("#div1").fadeIn();
    $("#div2").fadeIn("slow");
    $("#div3").fadeIn(3000);
});

fadeOut()

将显示的元素淡出地隐藏。

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

实例：

$("button").click(function() {
    $("#div1").fadeOut();
    $("#div2").fadeOut("slow");
    $("#div3").fadeOut(3000);
});

fadeToggle()

fadeToggle()可以在fadeIn()和fadeOut()之间切换。

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

实例：

$("button").click(function() {
    $("#div1").fadeToggle();
    $("#div2").fadeToggle("slow");
    $("#div3").fadeToggle(3000);
});

fadeTo()

将元素渐变为指定的透明度（0-1）。

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

speed是必须的参数。

实例：

$("button").click(function() {
    $("#div1").fadeTo("slow", 0.15);
    $("#div2").fadeTo("slow", 0.4);
    $("#div3").fadeTo("slow", 0.7);
});

jquery滑动

滑动着隐藏和显示元素。

slideDown(), slideUp(), slideToggle()

slideDown()

slideDown()用于向下（显示）滑动元素。

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

实例：

$("#flip").click(function() {
    // 这里#panel要设为display: none;
    $("#panel").slideDown();
});

slideUp()

用于向上滑动元素（隐藏）。

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

实例：

1
2
3

$("#flip").click(function() {
    $("#panel").slideUp();
});

slideToggle()

用于在slideDown()和slideUp()中切换。

实例：

先要将panel隐藏

1
2
3

$("#flip").click(function() {
    $("#panel").slideToggle();
});

jquery动画

animate()可以自定义动画。

animate()

语法： $(selector).animate({params}, speed, callback);

params参数定义动画的css。

实例：

// 先将position设置为positioned
$('button').click(function() {
    $('div').animate({
        left: '100px'
    }, 1000, callback);
});

操作多个属性

实例：

$("button").click(function() {
    // 这里每条css属性后面用的是逗号不是分号，属性名使用驼峰式
    $("div").animate({
        left: '250px',
        opacity: '0.5',
        height: '150px',
        width: '150px'
    }, 1000, callback);
});

使用相对值

实例：

$("button").click(function() {
    $("div").animate({
        left: '250px',
        height: '+=150px',
        width: '+=150px'
    });
});

使用预定义的值

实例：

$("button").click(function(){
  $("div").animate({
    height:'toggle'
  });
});

使用队列

如果创建了多个animate()则jquery会逐一运行。

停止动画

在动画停止之前可以使用stop()手动停止动画。

语法：$(selector).stop(stopAll, goToEnd);

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

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

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

实例：

1
2
3

$('div').click(function() {
    $('input').stop();
});

callback()

callback()在动画完成后执行。

chaining

jquery支持链式操作，可以将一系列方法写成一个链。

实例：

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

也可以这样写：

1
2
3

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