几个jquery实用的动画代码

1：  div左右平移并变色

   $('#btn1').click(function () {
        var _this = this;
        $('.div1:eq(0)').animate({ top: '100', left: '100' }, 1000, function () {
            $(this).css('background-color', 'green');
            $(_this).attr('disabled', 'disabled');
        });
    });

2：下拉列表

 $('.div1').mouseover(function () {
        $(this).find('.div2:eq(0)').stop().animate({ height: '300px' }, 500);
    }).mouseout(function () {
        $(this).find('.div2:eq(0)').stop().animate({ height: '0px' }, 500);
    });

 

3：进度条

 window.setInterval(function () {
            if (txt < 15) txt = a;
            else if (txt < 70) txt = b;
            else txt = c;
            $('.jdt_tiao').animate({ width: txt + '%' }, 500);
        }, 1500);

 

4： 点开展示所有文本

$('.div1').click(function () {
        var _this = this;
        if (_this.offsetHeight <= 100)
            $(_this).animate({ height: $(_this).find('.div2:eq(0)').get(0).offsetHeight + 20 }, 500);
        else
            $(_this).animate({ height: '100' }, 500);
    });

 

5：弹出效果

  $('#btn1').click(function () {
        $('#div1').animate({ top: '100' }, 500, function () {
            $('#div1').animate({ top: '80' }, 200, function () {
                $('#div1').animate({ top: '100' }, 200, function () {

                });
            });
        });
    });
    $('#div1').click(function () {
        $('#div1').animate({ top: '120' }, 200, function () {
            $('#div1').animate({ top: '-300' }, 500, function () {
            });
        });
    });