首页 > 代码库 > jquery学习笔记2——jq效果

jquery学习笔记2——jq效果

2024-08-31 19:06:16   214人阅读

一、显示隐藏：

可以使用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);

　　

 

jquery学习笔记2——jq效果


联系
我们