运用JQuery实现淡出淡入效果

    xiaoxiao2021-04-13  34

    <html> <head> <script src="jquery-3.1.1.js"></script> <script> $(document).ready(function(){   $("button").click(function(){     $("#div1").fadeToggle();     $("#div2").fadeToggle("slow");     $("#div3").fadeToggle(3000);   }); });

    </script>

    <title>实现淡出淡入</title>

    </head> <body> <p style="font-size:18px;font-family:'微软雅黑';">演示带有不同参数的 fadeToggle() 方法。</p> <button style="position:relative;left:390px;width:180px;height:35px;color:#fff;background-color:#ABADB1;font-family: '微软雅黑';border:solid thin;font-weight:bold">哈哈,点这里有惊喜噢!</button> <br><br> <div id="div1" style="width:150px;height:150px;background-color:#EB90FF;position:relative;left:400px;"></div> <br> <div id="div2" style="width:150px;height:150px;background-color:#605D5D;position:relative;left:400px;"></div> <br> <div id="div3" style="width:150px;height:150px;background-color:#90DBFF;position:relative;left:400px;"></div> </body> </body> </html>
    转载请注明原文地址: https://ju.6miu.com/read-668970.html

    最新回复(0)