欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

jquery動(dòng)畫(huà)效果學(xué)習(xí)筆記（8種效果）

 更新時(shí)間：2015年11月13日 11:19:58   投稿：lijiao  
這篇文章分享了一份jquery動(dòng)畫(huà)效果學(xué)習(xí)筆記，針對(duì)jquery動(dòng)畫(huà)效果進(jìn)行細(xì)致解析，對(duì)淡入淡出效果、滑動(dòng)效果進(jìn)行原理講解，想要學(xué)好jquery動(dòng)畫(huà)效果，就耐心閱讀本文，相信大家會(huì)有意想不到的收獲。

1、元素的顯示和隱藏

  • display:none; 隱藏
  • display:block; 顯示

簡(jiǎn)單顯示和隱藏方法

  • a) show() 顯示
  • b) hide() 隱藏
  • c) toggle() 開(kāi)關(guān)，顯示則隱藏，隱藏則顯示
<script type="text/javascript">
  function f1(){
    //隱藏
    $("div").hide();//display:none
    //document.getElementById('id').style.display="none";
  }
  function f2(){
    //顯示
    $("div").show();//display:block
  }
  function f3(){
    $("div").toggle();
  }
</script>
<style type="text/css">
   div {width:300px; height:200px; background-color:blue;}
</style>
 <body>
   <div>duck and dog</div>
   <input type="button" value="隱藏" onclick="f1()" />
   <input type="button" value="顯示" onclick="f2()" />
   <input type="button" value="開(kāi)關(guān)效果" onclick="f3()" />
</body>

CSS支持兩種方法顯示和隱藏元素，即使用visibility或display樣式，他們控制元素顯示和隱藏的時(shí)候效果相同，但是結(jié)果卻不同。
具體說(shuō)明如下：

  • visibility 屬性在隱藏元素的時(shí)候，同時(shí)會(huì)保存元素在文檔流中的影響力，隱藏后元素的未知保持不變。該屬性包括visible(默認(rèn))和hidden兩個(gè)值。
  • display 隱藏后，隱藏的元素不再占用文檔的位置。

2、滑動(dòng)效果顯示和隱藏

  • slideUp(speed[,callback]) 向上滑動(dòng)元素并最終隱藏
  • slideDown(speed[,callback]) 向下滑動(dòng)元素并最終顯示
  • slideToggle(speed[,callback])

                     speed：設(shè)置效果的速度(slow（600）normal（400） fast（200） 時(shí)間(毫秒))
                     callback: 效果執(zhí)行完畢之后自動(dòng)調(diào)用的回調(diào)函數(shù)

<script type="text/javascript">
  function f1(){
    //隱藏
    $("div").slideUp(3000,function(){
      alert('我消失了，你能看到么');
    });
  }
  function f2(){
    //顯示
    $("div").slideDown(3000,function(){
      alert('我又回來(lái)了');
    });//display:block
  }
  function f3(){
    $("div").slideToggle(1000);
  }
  $(function(){
    //氣缸滑動(dòng)效果
    //setInterval("f3()",1000);
  });
</script>

<style type="text/css">
div {width:300px; height:200px; background-color:blue;}
</style>


<body>
   <div>duck and dog</div>
   <input type="button" value="隱藏" onclick="f1()" />
   <input type="button" value="顯示" onclick="f2()" />
   <input type="button" value="開(kāi)關(guān)效果" onclick="f3()" />
 </body>

3、淡入淡出效果

讓元素通過(guò)一定透明度變化，達(dá)到顯示和隱藏的效果

  • fadeIn(speed, [callback])
  • fadeOut(speed, [callback])
  • fadeToggle(speed, [callback])開(kāi)關(guān)效果
  • fadeTo(speed, opacity, [callback]) 把div設(shè)置一定透明度（0-1）0.3就是30%透明度

<script type="text/javascript"> 
  function f1(){
    //隱藏
    $("div").fadeOut(4000);
  }
  function f2(){
    //顯示
    $("div").fadeIn(4000);
    $("#two").fadeTo(2000,0.3);
  }

  function f3(){
    $("div").fadeToggle(2000);
  }

</script>
<style type="text/css">
  div {width:300px; height:200px; background-color:blue;}
</style>
<body>
  <div id = "two">duck and dog</div>

  <input type="button" value="隱藏" onclick="f1()" />
  <input type="button" value="顯示" onclick="f2()" />
  <input type="button" value="開(kāi)關(guān)效果" onclick="f3()" />
</body>

設(shè)置透明度，div的透明度是30%：

4、動(dòng)畫(huà)效果底層方法animate()

show() hide() 等等動(dòng)畫(huà)效果內(nèi)部都是執(zhí)行animate()方法

$().animate(css效果參數(shù)[，時(shí)間][，回調(diào)函數(shù)]);

css()等一般jquery方法執(zhí)行完畢之后會(huì)返回當(dāng)前jquery對(duì)象，因此jquery的許多方法可以鏈?zhǔn)秸{(diào)用。

 <script type="text/javascript">
  function f1(){
    //文字大小、文字粗體、div本身寬度和高度
    //font-size background-color color

    console.log($("div"));
    //jquery對(duì)象調(diào)用完畢css方法本身還是一個(gè)jquery對(duì)象
    //說(shuō)明css方法執(zhí)行完畢有return this關(guān)鍵字
    console.log($("div").css('font-weight','bold').css("background-color",'pink')); 

    var jn = {'font-size':'30px',width:'400px',height:'300px'};
    $("div").css('font-weight',"bold").css("background-color","pink").css("color","white").animate(jn,2000);

    //$("div").animate(jn,2000);
  }

</script>

<style type="text/css">
  div {width:300px; height:200px; background-color:blue; }
</style>

<body>
  <div>duck and dog</div>
  <input type="button" value="設(shè)置" onclick="f1()" />
</body>

5、累加累減動(dòng)畫(huà)

如果動(dòng)畫(huà)一次設(shè)定left：500 ,第一次單擊div會(huì)左移500像素,第二次單擊就不會(huì)動(dòng)了。累加累減就是連續(xù)動(dòng)的，只需要將left:”500px”改成left:”+=500px”或者left:”-=500px”即可。

(function(){ 
  $("#panel").click(function(){ 
    $(this).animate({left: "+=500px"}, 3000); 
  }) 
})</span>

6、多重動(dòng)畫(huà)

1、同時(shí)執(zhí)行多個(gè)動(dòng)畫(huà)
上面的例子只控制了left屬性的變化，這回我們?cè)诳刂苐eft屬性的時(shí)候同時(shí)控制元素高度變?yōu)?00px

$(function(){ 
  $("#panel").click(function(){ 
    $(this).animate({left: "500px",height:"200px"}, 3000); 
  }) 
})

2、順序執(zhí)行動(dòng)畫(huà)

上面例子中元素右移和放大高度兩個(gè)動(dòng)畫(huà)是同時(shí)進(jìn)行的。現(xiàn)在我們要實(shí)現(xiàn)先右移再放大高度，那很簡(jiǎn)單，只需要把上面的animate()方法拆開(kāi)寫(xiě)成兩個(gè)即可

$(function(){ 
  $("#panel").click(function(){ 
    $(this).animate({left: "500px"},3000) 
       .animate({height:"200px"},1000); 
  }) 
})

3、綜合動(dòng)畫(huà)

接下來(lái)完成更復(fù)雜的動(dòng)畫(huà)。單擊div元素后讓他向右移動(dòng)的同時(shí)增大他的高度，并將它的不透明度從50%切換到100%。然后再讓它從上向下移動(dòng)，同時(shí)它的寬度變大，當(dāng)完成這
些效果后讓它以淡出的方式隱藏掉。

$(function(){ 
  $("#panel").css("opacity",0.5);//設(shè)置不透明度 
  $("#panel").click(function(){ 
    $(this).animate({left: "400px",height:"200px",opacity:"1"},3000) 
       .animate({top:"200px",width:"200px"},3000) 
       .fadeOut(1000); 
  }) 
})

7、動(dòng)畫(huà)回調(diào)函數(shù)

在上例中，如果想在最后一步切換css樣式而不是隱藏元素。這我們就可以用到animate的第三個(gè)參數(shù)回調(diào)函數(shù)了

$(function(){ 
  $("#panel").css("opacity",0.5);//設(shè)置不透明度 
  $("#panel").click(function(){ 
    $(this).animate({left: "400px",height:"200px",opacity:"1"},3000) 
       .animate({top:"200px",width:"200px"},3000,function(){$(this).css("border","5px solid blue")}); 

  }) 
})

這樣就把css方法加入到動(dòng)畫(huà)隊(duì)列中了。

8、停止動(dòng)畫(huà)和判斷是否處于動(dòng)畫(huà)狀態(tài)

1、停止元素的動(dòng)畫(huà)

stop([clearQueue][,gotoEnd]) 兩個(gè)都是可選參數(shù)，都是boolean類(lèi)型
參數(shù)說(shuō)明：

clearQueue：代表是否清空未執(zhí)行完的動(dòng)畫(huà)隊(duì)列
gotoEnd ：代表是否將正在執(zhí)行的動(dòng)畫(huà)跳到末狀態(tài)
通過(guò)一個(gè)綜合的示例就可以弄明白stop()方法的這兩個(gè)參數(shù)了：

<style type="text/css"> 
  *{margin:0;padding:0;}  
  body { font-size: 13px; line-height: 130%; padding: 60px } 
  #panel { width: 60px; border: 1px solid #0050D0 ;height:22px;overflow:hidden;} 
  .head { padding: 5px; background: #96E555; cursor: pointer;width: 300px;} 
  .content { padding: 10px; text-indent: 2em; border-top: 1px solid #0050D0;display:block; width:280px;} 
</style> 
<script src="../../../scripts/jquery.js" type="text/javascript"></script> 
<script type="text/javascript"> 
  $(function(){ 
     $("button:eq(0)").click(function () { 
       $("#panel") 
        .animate({height : "150" } , 2000 ) 
        .animate({width : "300" } , 2000 ) 
        .hide(3000) 
        .animate({height : "show" , width : "show" , opacity : "show" } , 2000 ) 
        .animate({height : "500"} , 2000 ); 
     }); 
     $("button:eq(1)").click(function () { 
       $("#panel").stop();//停止當(dāng)前動(dòng)畫(huà)，繼續(xù)下一個(gè)動(dòng)畫(huà) 
     }); 
     $("button:eq(2)").click(function () { 
       $("#panel").stop(true);//清除元素的所有動(dòng)畫(huà) 
     }); 
     $("button:eq(3)").click(function () { 
       $("#panel").stop(false,true);//讓當(dāng)前動(dòng)畫(huà)直接到達(dá)末狀態(tài) ，繼續(xù)下一個(gè)動(dòng)畫(huà) 
     }); 
     $("button:eq(4)").click(function () { 
       $("#panel").stop(true,true);//清除元素的所有動(dòng)畫(huà)，讓當(dāng)前動(dòng)畫(huà)直接到達(dá)末狀態(tài)  
     }); 

  }) 
</script> 

<body> 
  <button>開(kāi)始一連串動(dòng)畫(huà)</button> 
  <button>stop()</button> 
  <button>stop(true)</button> 
  <button>stop(false,true)</button> 
  <button>stop(true,true)</button> 
  <div id="panel"> 
    <h5 class="head">三國(guó)殺殺天下</h5> 
    <div class="content"> 
      夏侯?lèi)难劬?，陸遜的聯(lián)營(yíng)，郭嘉司馬深深的基情 
    </div> 
  </div> 
</body> 
</html>

2、判斷元素是否處于動(dòng)畫(huà)狀態(tài)

當(dāng)使用animate()方法的時(shí)候，要避免動(dòng)畫(huà)的累積導(dǎo)致的動(dòng)畫(huà)與用戶(hù)的行為不一致的現(xiàn)象。當(dāng)用戶(hù)快速在某個(gè)元素上執(zhí)行animate()動(dòng)畫(huà)時(shí)，就會(huì)出現(xiàn)動(dòng)畫(huà)累積。

解決辦法是判斷元素是否正在處于動(dòng)畫(huà)狀態(tài)，當(dāng)不處于動(dòng)畫(huà)狀態(tài)的時(shí)候，才為元素添加新的動(dòng)畫(huà)。
用法：

if(!$(element).is(":animated")){ 
  //添加新的動(dòng)畫(huà) 
}

通過(guò)本文對(duì)8種jquery動(dòng)畫(huà)效果的詳細(xì)剖析，玩轉(zhuǎn)jquery動(dòng)畫(huà)效果，希望大家喜歡這篇針對(duì)jquery動(dòng)畫(huà)效果進(jìn)行全面介紹的文章。

相關(guān)文章

最新評(píng)論