美文网首页
jQuery效果总结

jQuery效果总结

作者: 筱南独舞 | 来源:发表于2016-12-12 16:51 被阅读22次
  • 隐藏/显示
    jQuery hide()和show():
$("#hide").click(function(){
    $("p").hide();
});
$("#show").click(function(){
    $("p").show();
});
// 也可以使用带参数的 $("p").show(2000);

jQuery toggle():

//用来切换hide()和show()方法,显示被隐藏的元素或隐藏已显示的元素。
$("button").click(function(){
    $("p").toggle();
});
// 同样可以使用带参数的 $("p").toggle(2000);
  • 淡入淡出
    fadeIn()、fadeOut()、fadeToggle()、fadeTo()
$("button").click(function(){
    // 淡入效果,可以带参数,淡入的时间(毫秒)
    $("div1").fadeIn();
    $("div2").dadeIn(1000);
    // 淡出效果,带参数为淡出时间
    $("div1").fadeOut();
    $("div2").fadeOut(2000);
    // fadeToggle()用于fadeIn()和fadeOut()之间切换
    $("div1").fadeToggle();
    $("div2").fadeToggle("slow");
    // fadeTo()用于渐变为指定的不透明度(0-1之间)
    $("#div1").fadeTo("slow",0.15);
    $("#div2").fadeTo(2000,0.4);
});
  • 滑动
    jQuery slideDown()、slideUp()、slideToggle()
$('button').click(function(){
    // slideDown()用于向下滑动元素
    $('p#in').slideDown('slow');
    //  slideUp()用于向上滑动元素
    $('p#out').slideUp(3000);
    // slideToggle()用于slideDown()和slideUp()之间切换
    $("p#toggle").slideToggle();
});
  • 动画
    $(selector).animate({params},speed,callback);
    params为比传,speed和callback可选
$('button').click(function(){
    // 将一个<div>移动到左边
    $('div').animate({left:'100px'});
    // 也可以同时操作多个属性
    $('div').animate({left:'200px', opacity:'0.4', height:'100px', width:'50px'});
    // 或者相对属性值
    $('div').animate({left:'200px', height:'+=100px', width:'+=50px'});
    // 使用动画集合
    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");
});
  • stop()
    jQuery stop()方法用于停止正在之行的动画或效果。
    $(selector).stop(stopAll,goToEnd);
    stopAll为可选,是否清楚队列,默认为false,仅停止动画;
    goToEnd为可选,是否立即完成当前动画,默认为false;
$(document).ready(function(){
    $("#flip").click(function(){
        $("p").slideDown(4000);
    });
    $("#stop").click(function(){
        $("p").stop();
    });
});
  • Callback
    在所有效果之行结束后都可以使用callback来之行其他动作,比如:
$("button").click(function(){
    $("p").hide(1000,function(){
        alert("<p>隐藏了");
    });
});
  • Chaining
    跟其他语言一样,jQuery也可以对同一个元素之行多条命令,如:
//把<p>字体颜色变红,向上移动后再向下移动
$("p").css("color","red").slideUp(1000).slideDown(1000);

相关文章

网友评论

      本文标题:jQuery效果总结

      本文链接:https://www.haomeiwen.com/subject/dwvmmttx.html