jquery 实现动画效果（各种方法）

Posted 2021-01-22 xxcxxc

1.show()和hide()和toggle()(这是show和hide的一个综合，一个按钮就实现显示和隐藏)

效果：

代码：

<button type="button" class="show">普通show</button>
<button type="button" class="show1">一秒show</button>
<button type="button" class="hidden">普通hidden</button>
<button type="button" class="hidden1">一秒hidden</button>
<div id="box" style="width: 100px;height: 100px;background-color: red;"></div>
<script type="text/javascript">
    $(".show").click(function () {
        $("#box").show();
    })
    $(".show1").click(function () {
        $("#box").show(1000);
    })
    $(".hidden").click(function () {
        $("#box").hide();
    })
    $(".hidden1").click(function () {
        $("#box").hide(1000);
    })
　　//还可以添加slow（200）,fast（600）,normal（400）三个参数，默认是400毫秒
</script>

实现列队动画：

效果：

代码：

<style>
    div{
        background: red;
        color: #fff;
        margin-left: 5px;
        float: left;
        display: none;
    }
</style>
<div>你</div>
<div>好</div>
<div>吗</div>
<div>？</div>
<button type="button" class="show">显示列队动画</button>
<button type="button" class="hide">隐藏列队动画</button>

<script type="text/javascript">
    $(".show").click(function () {
        //列队动画，递归自调用
        $("div").first().show("fast",function testShow() {
            $(this).next().show("fast",testShow);
        })
    })
    $(".hide").click(function () {
        //列队动画，递归自调用
        $("div").last().hide("fast",function testShow() {
            $(this).prev().hide("fast",testShow);
        })
    })
</script>

 2.滑动效果：包括slideUp()和slide()down和slideToggle()和上面实现方式一样的，效果呈现滑动效果

3.淡入淡出：包括fadeIn()和fadeOut()和fadeToggle()和上面实现方式也是一样的，效果呈现淡入淡出

但还有一个fadeTo(\'fast\',0.3)   0.3是透明度