jQuery使用fadein方法实现渐出效果实例

jQuery使用fadein方法实现渐出效果实例_jquery

php中文网

发布： 2016-05-16 16:07:28

原创

1269人浏览过

本文实例讲述了jquery使用fadein方法实现渐出效果的方法。分享给大家供大家参考。具体分析如下：

下面的JS代码通过jQuery的fadein方法控制指定色块逐渐显示的功能

<!DOCTYPE html>
<html>
<head>
<script src="js/jquery.min.js">
</script>
<script>
$(document).ready(function(){
 $("button").click(function(){
 $("#div1").fadeIn();
 $("#div2").fadeIn("slow");
 $("#div3").fadeIn(3000);
 });
});
</script>
</head>
<body>
<p>Demonstrate fadeIn() with different parameters.</p>
                    <div class="aritcle_card">
                        <a class="aritcle_card_img" href="/xiazai/shouce/1610">
                            <img src="https://img.php.cn/upload/manual/000/000/005/170556306161620.gif" alt="Delphi 7应用编程150例 全书内容 CHM版">
                        </a>
                        <div class="aritcle_card_info">
                            <a href="/xiazai/shouce/1610">Delphi 7应用编程150例 全书内容 CHM版</a>
                            <p>Delphi 7应用编程150例 CHM全书内容下载，全书主要通过150个实例，全面、深入地介绍了用Delphi 7开发应用程序的常用方法和技巧，主要讲解了用Delphi 7进行界面效果处理、图像处理、图形与多媒体开发、系统功能控制、文件处理、网络与数据库开发，以及组件应用等内容。这些实例简单实用、典型性强、功能突出，很多实例使用的技术稍加扩展可以解决同类问题。使用本书最好的方法是通过学习掌握实例中的技术或技巧，然后使用这些技术尝试实现更复杂的功能并应用到更多方面。本书主要针对具有一定Delphi基础知识</p>
                            <div class="">
                                <img src="/static/images/card_xiazai.png" alt="Delphi 7应用编程150例 全书内容 CHM版">
                                <span>1</span>
                            </div>
                        </div>
                        <a href="/xiazai/shouce/1610" class="aritcle_card_btn">
                            <span>查看详情</span>
                            <img src="/static/images/cardxiayige-3.png" alt="Delphi 7应用编程150例 全书内容 CHM版">
                        </a>
                    </div>
                
<button>Click to fade in boxes</button>
<br><br>
<div id="div1" 
style="width:80px;height:80px;display:none;background-color:red;">
</div><br>
<div id="div2" 
style="width:80px;height:80px;display:none;background-color:green;">
</div><br>
<div id="div3" 
style="width:80px;height:80px;display:none;background-color:blue;">
</div>
</body>
</html>

登录后复制

希望本文所述对大家的jQuery程序设计有所帮助。