如何开发jquery无闪烁平滑动画

如何开发jquery无闪烁平滑动画,jquery,animation,Jquery,Animation,下面是我的脚本,当我运行此脚本时,我注意到出现闪烁。特别是IE中的动画看起来更糟。我知道闪烁是由于使用动画功能增加div大小而发生的。所以,请指导我如何才能使下面的脚本动画看起来非常平滑。指导我需要在脚本中更改哪些代码,这样它的功能相同,但动画看起来很平滑。我不要闪烁。谢谢 这里是演示url $(文档).ready(函数(){ $('#lnk')。单击(函数(e){ $('body').append(“”).show(); var$t=$(“#转换”), to=$(this).offset(),

下面是我的脚本,当我运行此脚本时,我注意到出现闪烁。特别是IE中的动画看起来更糟。我知道闪烁是由于使用动画功能增加div大小而发生的。所以,请指导我如何才能使下面的脚本动画看起来非常平滑。指导我需要在脚本中更改哪些代码,这样它的功能相同,但动画看起来很平滑。我不要闪烁。谢谢

这里是演示url

$(文档).ready(函数(){
$('#lnk')。单击(函数(e){
$('body').append(“”).show();
var$t=$(“#转换”),
to=$(this).offset(),
td=$(文件);
$t.css({
顶部:至顶部+50,
左:向左+50,
显示:“块”
}).制作动画({
不透明度:1,
顶部:td.height()/2,
左:td.width()/2
},600,函数(){
$(此)。设置动画({
顶部:'-=75',
左:'-=50'
}, 600);
$('#transition').addClass(“总线样式”);
setTimeout(函数(){
$(“#转换”)。设置动画({
顶部:(td.高度()/2)-200/2,
左:(td.width()/2)-250/2,
宽度:250,
身高:200
},600,函数(){
//警报(“pp”);
//做事
$(“#transition”).removeClass(“总线样式”);
$('#transition').html('Welcome…');
});
}, 1000);
});
$t.click(函数(e){
//警报(“pp”);
$(this.fadeOut('slow').remove();
});
返回false;
});
});
$(document).ready(function () {
        $('#lnk').click(function (e) {
            $('body').append('<div id="transition"></div>').show();

            var $t = $('#transition'),
            to = $(this).offset(),
            td = $(document);

            $t.css({
                top: to.top + 50,
                left: to.left + 50,
                display: 'block'
            }).animate({
                opacity: 1,
                top: td.height() / 2,
                left: td.width() / 2
            }, 600, function () {
                $(this).animate({
                    top: '-=75',
                    left: '-=50'
                }, 600);

                $('#transition').addClass("BusyStyles");
                setTimeout(function () {
                    $('#transition').animate({
                        top: (td.height() / 2) - 200/2,
                        left: (td.width() / 2) - 250/2,
                        width: 250,
                        height: 200
                    }, 600, function () {
                        //alert('pp');
                        // to do things   
                        $('#transition').removeClass("BusyStyles");
                        $('#transition').html('<b>Welcome...</b>');
                    });
                }, 1000);
            });

            $t.click(function (e) {
                //alert('pp');
                $(this).fadeOut('slow').remove();
            });
            return false;
        });


    });