jQuery 常用效果

hide和show 同样有 fadeInhe fadeOut 的功能

$(document).ready(function(){
  $("#hide").click(function(){
  $("p").hide(2000);
  });
  $("#show").click(function(){
  $("p").show(2000);
  });
});

toggle 隐藏显示自动切换同样后面可以跟时间做到 fadeToggle 的效果

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

淡入淡出:

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

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

fadeToggle 淡入淡出自动切换

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

slideToggle 滑动效果 自动切换 做到slideDown() 与 slideUp() 方法之间进行切换。

$(document).ready(function(){
$(".flip").click(function(){
    $(".panel").slideToggle("slow");
  });
});

animate 动画效果:

$(document).ready(function(){
  $("button").click(function(){
    $("div").animate({
      left:'250px',
      opacity:'0.5',
      height:'150px',
      '150px'
    });
  });
});

设置元素 不断的增加范围
$(document).ready(function(){
  $("button").click(function(){
    $("div").animate({
      left:'250px',
      height:'+=150px',
      '+=150px'
    });
  });
});

队列功能
$("button").click(function(){
  var div=$("div");
  div.animate({height:'300px',opacity:'0.4'},"slow");
  div.animate({'300px',opacity:'0.8'},"slow");
  div.animate({height:'100px',opacity:'0.4'},"slow");
  div.animate({'100px',opacity:'0.8'},"slow");
});

元素移动到右边，然后增加文本的字号
$(document).ready(function(){
  $("button").click(function(){
    var div=$("div");  
    div.animate({left:'100px'},"slow");
    div.animate({fontSize:'3em'},"slow");
  });
});

callback 执行效果后回调:

$("p").hide(1000,function(){
alert("The paragraph is now hidden");
});

jQuery 常用效果

相关推荐