jquery学习笔记2——jq效果

一、显示隐藏:

可以使用show()hide()方法来显示隐藏;

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

  可以使用toggle()方法在show()方法和hide()方法中间切换;

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

  语法:

$(selector).show(speed,callback);
$(selector).hide(speed,callback);
$(selector).toggle(speed,callback);
//其中speed 和callback都是可选参数,speed单位为毫秒(如设置成1000,2000等);callback为回调函数;

  

二、淡入淡出:

方法:fadeIn();     fadeOut();    fadeToggle();    fadeTo()

$("#btn").click(function(){
    $("#div1").fadeIn();
    $("#div2").fadeOut(2000);
    $("#div3").fadeIn("slow")  ;
})

  语法:

    $(selector).fadeIn(speed,callback);

    $(selector).fadeOut(speed,callback);

    $(selector).fadetoggle(speed,callback);

#("#btn").click(function(){
   $("#div4").fadeTo(slow,0.12);
});

  fadeTo可以使对象渐变成给定的透明度值(结余0到1之间);

      语法:fadeTo(speed,opacity,callback);

 

三、滑动:

方法:slideDown()      slideUp()    slideToggle()

$("button").click(function(){
    $("#p1").slideUP("slow");      //向上滑动隐藏
    $("#p2").slideDown("slow");      //向下滑动隐藏
    $("#p3").toggle("slow");      //切换   
});

  语法:

  $(selector).slideUp(speed,callback);

  $(selector).slideDown(speed,callback);

  $(selector).slideToggle(speed,callback);

 

四、animate动画:

语法:

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

  必须:params参数定义形成动画后的css属性;

  可选:speed参数为效果时长;

  可选:callback为回调函数;

   1、多参数设置

$("#dtn").click(function(){
    $("div").animate({
  left:‘20px’,
  opcity:'0.2',
  height:'150px',
  width:'150px'
  }); });

  2、animate也可以使用相对值

$("button").click(function(){
    $("#div5").animate({
    left:'150px',
    height:'+=20px',
    width:'+=30px',
    });
});

  3、可以将animate设置为”show“,”hide“,”toggle“

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

  效果:在设定值与默认值之间切换;

  4、使用队列功能: 

$("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");   
});

  可以设置多个内部”队列“,执行时候会依次进行animate调用

  5、动画举例:

$("button").click(function(){
  var div=$("div");
  div.animate({left:'100px'},"slow");
  div.animate({fontSize:'3em'},"slow");
});

  效果:将div移动到右边,增加文本字号;

 

五、stop()方法;

  stop()方法用于停止、中断jQuery效果;

语法:

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

  可选:stopAll,是否应该清除动画队列。默认false,仅会停止当前动画,后续动画依次执行;

  可选:goToEnd,是否立即完成当前动画,默认false。

  因此,默认的stop()会清除元素上正在执行的动画;

六、callback  回调函数

callback:在当前动作完成之后执行。作为可选参数;

如果你希望在一个涉及动画的函数之后执行一条语句,请使用callback;

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

七、Chaining 动作链

 允许我们在一条语句之中用多个jQuery方法,在一个对象上连续使用多个方法,依次执行;

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

  

 

转载于:https://www.cnblogs.com/zhuyucun/p/6276684.html

你可能感兴趣的:(jquery学习笔记2——jq效果)