当前位置: 首页>>代码示例 >>用法及示例精选 >>正文


JQuery fadeTo()用法及代码示例


fadeTo()是jQuery中的内置方法,用于更改所选元素的不透明度。
用法:

$(selector).fadeTo(speed, opacity, easing, call_function)

选择器是选定的元素。
参数:它接受以下指定的四个参数-

  • 速度:它指定衰落效果的速度。
  • 不透明度:它指定淡入淡出,并且该值必须在0.0到1.0之间。
  • 缓和:它指定动画不同点的速度。
  • call_function:它是可选参数,在执行fadeTo方法之后执行函数。

返回值:它不返回任何值。


jQuery代码显示fadeTo()方法的用法方式:

代码1:
在下面的代码中,没有传递可选的函数参数。

<html> 
  
<head> 
    <script src="https://code.jquery.com/jquery-1.10.2.js"> 
    </script> 
    <style> 
        body { 
            width: 40%; 
            height: 100px; 
            border: 2px solid green; 
            padding: 20px; 
        } 
    </style> 
  
</head> 
  
<body> 
    <!-- click on this paragraph and this paragraph will fade out -->
    <p> 
        This paragraph will fade out ! 
    </p> 
    <!-- after clicking on this paragraph this paragraph will  
 not fade out -->
    <p> 
        This paragraph will not fade ! 
    </p> 
    <!-- jQuery code to show working of this method -->
    <script> 
        $("p:first").click(function() { 
            $(this).fadeTo("slow", 0.33); 
        }); 
    </script> 
  
</body> 
  
</html>

输出:
在点击任何段落之前-

在点击第一段和第二段之后,

代码2:
在下面的代码中,传递了可选的函数参数。

<html> 
  
<head> 
    <script 
    src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"> 
    </script> 
    <!-- jQuery code to show the working of this method -->
    <script> 
        $(document).ready(function() { 
            $("button").click(function() { 
                $("p").fadeTo(2000, 0.2, function() { 
                    alert("The fadeTo effect has finished!"); 
                }); 
            }); 
        }); 
    </script> 
    <style> 
        body { 
            width: 40%; 
            height: 100px; 
            border: 2px solid green; 
            padding: 20px; 
        } 
    </style> 
</head> 
  
<body> 
    <!-- this paragraph will fade out -->
    <p>This is a paragraph.</p> 
  
    <!-- click on this button and paragraph will fade out -->
    <button>Click me</button> 
  
</body> 
  
</html>

输出:
在单击“Click me”按钮之前,

单击“Click me”按钮后,



相关用法


注:本文由纯净天空筛选整理自kundankumarjha大神的英文原创作品 jQuery | fadeTo() with Examples。非经特殊声明,原始代码版权归原作者所有,本译文未经允许或授权,请勿转载或复制。