zoukankan      html  css  js  c++  java
  • jQuery 常用方法2(持续更新)

    5.fadeIn()  fadeOut()  fadeToggle()  fadeTo()

    fadeIn():用于淡入已隐藏的元素。

    fadeOut( ) :方法用于淡出可见元素。

    fadeToggle( ) :方法可以在 fadeIn() 与 fadeOut() 方法之间进行切换。

    如果元素已淡出,则 fadeToggle() 会向元素添加淡入效果。

    如果元素已淡入,则 fadeToggle() 会向元素添加淡出效果。

    fadeTo( ) :方法允许渐变为给定的不透明度(值介于 0 与 1 之间)。

    重点:在搞这几个方法时,我想到了另一对方法hide()show()。hide隐藏起来的内容能否被“淡入”,被“淡出”的内容能否被“淡入”。为了方便,我拿fadeToggle方法和show,hide进行试验。发现,他们之间能相互作用!这个发现让我有点小兴奋,附上试验代码:

    <!DOCTYPE html>
    <html>
    <head>
    	<meta charset="utf-8">
    	<script type="text/javascript" src="jquery-2.2.1.min.js"></script>
    	<script type="text/javascript">
    	$(function()
    	{
    		$(".btn1").click(function()
    		{
    			$(".test").hide("slow");
    		});
    
    		$(".btn2").click(function(){
    			$(".test").fadeToggle("slow");
    		});
    
    		$(".btn3").click(function(){
    			$(".test").show("slow");
    		})
    	});
    	</script>
    
    </head>
    <body>
    
    <h2 class="test">This is a heading</h2>
    <p class="test">This is a para</p>
    <p>This is another</p>
    <button type="button" class="btn1">Click me to hide</button>
    <button type="button" class="btn3">Click me to show</button>
    <button type="button" class="btn2">fadeToggle </button>
    
    </body>
    </html>
    	
    

      

    6.animate() :用于创建自定义动画。几乎可以操纵所有css属性,可以使用队列功能。

    7.stop() :用于停止动画或效果,在它们完成之前。stop() 方法适用于所有 jQuery 效果函数,包括滑动、淡入淡出和自定义动画。

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

    可选的 stopAll 参数规定是否应该清除动画队列。默认是 false,即仅停止活动的动画,允许任何排入队列的动画向后执行。

    可选的 goToEnd 参数规定是否立即完成当前动画。默认是 false。

    因此,stop有四种停止方式:1.停止当前动画,允许动画队列中下一个动画进行。(false,false)2.停止当前动画,并清除动画队列,即所有的动画都不会执行并被清除掉。(true,false)3.立即完成当前的动画,允许动画队列中下一个动画正常进行。(false,true)。4.立即完成当前动画,并清除动画队列(true,true)。

    <!DOCTYPE html>
    <html>
    <head>
    <script src="/jquery/jquery-1.11.1.min.js">
    </script>
    <script> 
    $(document).ready(function(){
      $("#start").click(function(){
        $("div").animate({left:'100px'},5000);
        $("div").animate({fontSize:'3em'},5000);
      });
      
      $("#stop").click(function(){
        $("div").stop();
      });
    
      $("#stop2").click(function(){
        $("div").stop(true);
      });
    
      $("#stop3").click(function(){
        $("div").stop(true,true);
      });
      
    });
    </script> 
    </head>
    <body>
    
    <button id="start">开始</button>
    <button id="stop">停止</button>
    <button id="stop2">停止所有</button>
    <button id="stop3">停止但要完成</button>
    <p><b>"开始"</b> 按钮会启动动画。</p>
    <p><b>"停止"</b> 按钮会停止当前活动的动画,但允许已排队的动画向前执行。</p>
    <p><b>"停止所有"</b> 按钮停止当前活动的动画,并清空动画队列;因此元素上的所有动画都会停止。</p>
    <p><b>"停止但要完成"</b> 会立即完成当前活动的动画,然后停下来。</p> 
    
    <div style="background:#98bf21;height:100px;200px;position:absolute;">HELLO</div>
    
    </body>
    </html>
    

      

  • 相关阅读:
    基于xmpp openfire smack开发之Android客户端开发[3]
    简单工厂,抽象工厂,工厂模式三者的对照
    【独具慧眼 推荐有礼】找出您心中的技术大牛 活动開始啦!
    ZOJ 3201
    具体解释站点沙盒期的原因表现与解决的方法
    工作,究竟意味着什么
    MVC之查询demo
    学习开淘宝网店
    快排的两种写法
    QTableWidget具体解释(样式、右键菜单、表头塌陷、多选等) (非代理)
  • 原文地址:https://www.cnblogs.com/yns-blogs/p/5261523.html
Copyright © 2011-2022 走看看