day3

JQuery

//delay() 延迟(时间)
//animate({
    //参数:要改变的属性(属性必须是数值类型)
//})    }时间,回调函数)
$('button').click(function(){
    $('.box').delay(4000).animate({
        width:'100px',
        height:'100px',
        fontSize:'30px'
    },3000,function(){
        $('.box').animate({
        marginLeft:'20px',
        marginTop:'20px',
        borderRadius:'10px'
        },2000)
    })
})

案例

简陋购物车

$('button:eq(1)').click(function(){
    var img=document.createElement('img');
    img.className='hhh';
    img.src='./img/3.jpg';
    $('body').append(img);
    $('.hhh').animate({
        top:'100px',
        left:'500px'
    }).animate({
        top:'200px',
        left:'800px',
        width:'0px',
        height:'0px'
    })
})

你可能感兴趣的:(day3)