zoukankan      html  css  js  c++  java
  • jquery笔记(效果)

    显示/隐藏:

    $(selector).hide(speed, function()):隐藏

    $(selector).show(speed, function()):隐藏

    $(selector).toggle(speed, function()):显示/隐藏切换

    淡入/淡出:

    $(selector).fadeIn(speed, function()):淡入,必须先把元素隐藏掉(display:none)

    $(selector).fadeOut(speed, function()):淡出,即慢慢的隐藏掉

    $(selector).fadeToggle(speed, function()):淡入/淡出切换

    $(selector).fadeTo(speed,opacity,function());:方法允许渐变为给定的不透明度(值介于 0 与 1 之间)

    滑动:

    $(selector).slideDown(speed,function()):向下滑动

    $(selector).slideUp(speed,function()):向上滑动

    $(selector).slideToggle(speed,function()):切换

    动画:

    $(selector).animate({params},speed,function()):当使用 animate() 时,必须使用 Camel 标记法书写所有的属性名,比如,必须使用 paddingLeft 而不是 padding-left,使用 marginRight 而不是 margin-right,等等。同时,色彩动画并不包含在核心 jQuery 库中。与css3动画略有不同的是个人觉得比较好控制,不会回到原来的状态。

      可以取相对值:

    $("button").click(function(){
      $("div").animate({
        left:'250px',
        height:'+=150px',
        '+=150px'
      });
    }); 

    使用预定义值:hide(),show(),toggle()

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

    使用队列:

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

    停止动画:

    stop() 方法适用于所有 jQuery 效果函数,包括滑动、淡入淡出和自定义动画。

    $(selector).stop(stopAll,goToEnd):可选的 stopAll 参数规定是否应该清除动画队列。默认是 false,即仅停止活动的动画,允许任何排入队列的动画向后执行。可选的 goToEnd 参数规定是否立即完成当前动画。默认是 false。因此,默认地,stop() 会清除在被选元素上指定的当前动画。
     
    方法链接:
    采用方法链接的话,浏览器就不必多次查找相同的元素。当你需要链接一个动作,您只需简单地把该动作追加到之前的动作上。
    $("#p1").css("color","red").slideUp(2000).slideDown(2000);
    努力吧,为了媳妇儿,为了家。。。
  • 相关阅读:
    各大OJ刷题进度和分类
    (HDU)1785 -- You Are All Excellent (你天赋异禀)
    (HDU)1720 -- A+B Coming (A+B来了)
    (HDU)1718 -- Rank (段位)
    (HDU)1708 -- Shopaholic (购物狂)
    (HDU)1678 -- Shopaholic (购物狂)
    (HDU)1673 -- Optimal Parking (停车位)
    (HDU)1587 -- Flowers (花)
    (HDU)1570 -- A C
    (HDU)1563 -- Find your present! (找到你的礼物)
  • 原文地址:https://www.cnblogs.com/jlj9520/p/4843840.html
Copyright © 2011-2022 走看看