• JQuery学习之各种效果演示


    1.隐藏与显示:hide()和show(),toggle()

    **隐藏

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

      $("p").hide();

    });

    **显示:

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

      #("p").show();

    });

    **切换:toggle()方法来切换hide()和show()方法

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

      $("p").toggle();

    });

    **语法:

    $(selector).hide(speed,callback);  
    //speed参数用于规定隐藏/显示的速度,可以取:slow,fast或毫秒

    $(selector).show(speed,callback);
    //callback参数是显示或隐藏完成后执行的函数名称
     
     
    2.淡入淡出
    **fadenln():可以实现元素的淡入效果:
    $("button").click(function(){
      $("#div1").fadeIn();
      $("#div2").fadeIn("slow");
      $("#div3").fadeIn("3000");
    });
    语法:$(selector).fadeIn(speed,callback);    //speed参数规定效果的时长,callback参数是fading完成后执行的函数名称
     
    **fadeOut():用于淡出可见元素,语法同上
    $("button").click(function(){
      $("#div1").fadeOut();
      $("#div2").fadeOut("slow");
      $("#div3").fadeOut(3000);
    });
     
    **fadeToggle():可以实现fadeIn()和fadeOut()之间的切换,语法参数同上;
    如果元素已淡出,则fadeToggle()会向元素添加淡入效果;
    如果元素已淡入,则fadeToggle()会向元素添加淡出效果;
    $("button").click(function(){
      $("#div1").fadeToggle();
      $("#div2").fadeToggle("slow");
      $("#div3").fadeToggle(3000);
    });
     
    **fadeTo():允许渐变为给定的不透明度(值介于0与1之间)
    $("button").click(function(){
      $("#div1").fadeTo("slow",0.15);
      $("#div2").fadeTo("slow",0.4);
      $("#div3").fadeTo("slow",0.7);
    });
    语法:$(selector).fadeTo(speed,opacity,callback);      //opacity参数将淡入淡出效果设置为给定的不透明度
     
     
    3.滑动:
    **slideDown():用于向下滑动元素
    $("#flip").click(function(){
      $("#panel").slideDown();
    });
    语法:$(selector).slideDown(speed,callback);     //参数使用同上
     
    **slideUp():用于向上滑动元素,语法同上
    $("#flip").click(function(){
      $("#panel").slideUp();
    });
     
    **sideToggle():可以在slideDown()和slideUp()方法之间进行切换,语法同上:
    $("#flip").click(function(){
      $("#panel").slideToggle();
    });
     
     
    4.动画:
    **animate():用于创建自定义动画
    $("button").click(function(){
      $("#div").animate({left:'250px'});
    });
    语法:$(selector).animate({params},speed,callback);
    //params参数定义形成动画的CSS属性
    //speed参数规定效果的时长
    //callback参数是动画完成之后所执行的函数名称
     
    **animate()操作多个属性:
    $("button").click(function(){
      $("div").animate({
        left:'250px',
        opacity:'0.5',
        height: '150px',
        '150px'
        });
    });
     
    **animate():使用相对值(该值相对于元素的当前值)
    $("button").click(function(){
      $("div").animate({
        left:'250px',
            height:'+=150px',
        '+=150px'
      });
    });
     
    **animate()使用预定义的值,可以把属性的动画设置为“show”“hide”或“toggle”:
    $("button").click(function(){
      $("div").animate({
        height:'toggle'
      });
    });
     
    **animate()使用队列功能,多个animate同时实现,排队进行:
    $("button").click(function(){
      var div=$("div");
      div.animate({left:'100px'},"slow");
      div.animate({fontSize:'3em'},"slow")
    });
     
     
    5.停止动画:stop()方法适用于所有jQuery效果函数,包括滑动,淡入淡出和自定义动画
    $("#stop").click(function(){
      $("#panel").stop();
    });
     
    语法:$(selector).stop(stopAll,goToEnd);
    //stopAll参数规定是否应该清楚动画队列,默认是false,即仅停止活动的动画,允许任何排入队列的动画向后执行
    //goToEnd参数规定是否立即完成当前动画,,默认是false
    //默认的,stop()会清除在被元素指定的当前动画
     
     
    6.Callback方法:
    **在隐藏效果完全实现后回调函数:
    $("button").click(function(){
      $("p").hide("slow",function(){
       alert("The paragrah is now hidden"); 
      });
    });
     
    **没有回调函数时,警告框会在隐藏效果完成前弹出:
    $("button").click(function(){
      $("p").hide(1000);
      alert("The paragraph is now hidden");
    });
     
     
    7.Chaining方法:允许我们在一条语句中运行多个jQuery方法(在相同的元素上)
    $("#p1").css("color","red").slideUp(2000).slideDown(2000);
    //先css变颜色,在向上滑动,然后向下滑动
     
     
  • 相关阅读:
    书籍下载点
    总结一下散乱的开发点滴(3) (高手勿入)
    [收藏]Dynamic Controls in ASP.NET
    [收藏] ORACLE中函数
    面试题收集,面试和被面试中煎熬~~
    一句SQL得出表中重复的数据(TMP)
    总结一下散乱的开发点滴(4) (高手勿入)
    一个同步的例子
    关于学习的反思(下)系网开发记(4)
    关于学习的反思(上)系网开发记(2)
  • 原文地址:https://www.cnblogs.com/hqutcy/p/5951658.html
Copyright © 2020-2023  润新知