jQuery动画--------自定义动画

<script>
    // jQuery的自定义动画
    // $(标签).animate()
    // 可以通过 自定义动画 实现, css样式的改变
    // 特别注意: 有一些css样式,是不能改变的
    //   例如颜色改不了,就不能用此方法
    // 语法形式:
    //   $(标签).animate( {属性:属性值,属性:属性值....} )
    //   参数1: 要改变的 css的属性和属性值   可以没有单位px
    //   参数2: 定义的执行时间
    //   参数3: 定义的运动曲线
    //   参数4: 运动结束,执行的函数


    $('[name="width"]').click(function(){
        let randomW = parseInt(Math.random()*(500+1-100)+100 );
        console.log(randomW);
        $('div').animate({
            width : `${randomW}px`,
        } , 2000 , 'linear' , function(){
            console.log('运动结束了')
        })
    })

    $('[name="wh"]').click(function(){
        let randomW = parseInt(Math.random()*(500+1-100)+100 );
        let randomH = parseInt(Math.random()*(500+1-100)+100 );
        console.log(randomW,randomH);
        $('div').animate({
        
            width : `${randomW}px`,   
            height: `${randomH}px`,
        } , 2000 , 'linear' , function(){
            console.log('运动结束了')
        })
    })

    //color用这个方法改变不了
    $('[name="color"]').click(function(){
        let randomColor = `rgb(${parseInt(Math.random()*256)} ,${parseInt(Math.random()*256)} , ${parseInt(Math.random()*256)})`;
        console.log(randomColor);
        $('div').animate({
            background : randomColor,
            color : randomColor,
        } , 2000 , 'linear' , function(){
            console.log('运动结束了')
        })
    })

</script>