jQuery效果笔记

显示和隐藏show与hide

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

    $("p").hide();

});

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

    $("p").show();

});

缓慢显示或者隐藏的时候可以做出动画效果;

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

$("p").hide(1000);

});    //这里的单位时‘毫秒’,可以取值fast和slow或者是毫秒。


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

    $("p").toggle();

});

//点击隐藏,再点击显示。//同样可以控制速度


带有不同参数的fadeIn()方法也可以实现淡入隐藏。

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

$("div").fadeIn(/"slow"/1000);

});

淡出也是同理:fadeOut()

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

    $("div").fadeOut(/"slow"/1000);

});

发生渐变给与透明度fadeTo();其值介于0-1之间

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

    $("div").fadeTo("slow",0.5);

});


显示与隐藏面板

下拉是slideDown(),上滑为slideUp();一般我们要做就是显示和隐藏都做。

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

     $("#panel").slideToggle();

});

//点击显示,再点击隐藏,可以无限循环


动画属性,

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

    $("div").animate({left:'200px'});

});

除了left:‘200px'还可以继续添加需要的动画效果;用“,”分开,在同一个{}里

    left:'250px',

    opacity:'0.5',

    height:'150px',

    width:'150px'


停止动画,jQuery stop()方法,在动画完成之前可以停止正在进行的动画效果。包括华东,淡入淡出和自定义动画。

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

    $("#panel").stop();

});

//在函数执行完成后再弹出提示框

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

 $("p").hide("slow",function(){

 alert("段落现在被隐藏了");

  });

});

//没有回调函数,警告框会在隐藏完成之前弹出

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

 $("p").hide(1000);

  alert("段落现在被隐藏了");

});


方法链接:$("#p1").css("color","red").slideUp(2000).slideDown(2000);

$(document).ready(function(){

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

    $("#p1").css("color","red")

      .slideUp(2000)

      .slideDown(2000);

  });

});

你可能感兴趣的:(jQuery效果笔记)