jQuery动画效果

最新推荐文章于 2024-10-10 14:39:11 发布

de0414

最新推荐文章于 2024-10-10 14:39:11 发布

阅读量74

点赞数

文章标签： javascript ViewUI

原文链接：http://www.cnblogs.com/litzhiai/p/8540248.html

版权

jQuery动画效果

点击淡入淡出，分别进行显示和隐藏：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>

</head>
<body>


<p>yuan</p>

<button class="xianshi">显示</button>
<button class="yincang">隐藏</button>
<button class="qiehuan">切换</button>
<hr>
<h4>淡入淡出</h4>


<img src="egon.jpg" alt="" class="egon">

<p>
    <button class="danru">淡入</button>
    <button class="danchu">淡出</button>
    <button class="danqie">切换</button>
</p>


<script src="jquery-3.1.1.js"></script>
<script>



    $(".xianshi").click(function () {
        $("p").show(1000)

    });

    $(".yincang").click(function () {
        $("p").hide(1000)
    });

    $(".qiehuan").click(function () {
        $("p").toggle(1000)
    })


   $(".danru").click(function () {
       $(".egon").fadeIn(1000)
   });


   $(".danchu").click(function () {
       $(".egon").fadeOut(1000)
   });



   $(".danqie").click(function () {
       $(".egon").fadeToggle(1000)
   });


</script>

</body>
</html>

转载于:https://www.cnblogs.com/litzhiai/p/8540248.html