以下は私のスクリプトです。このスクリプトを実行すると、ちらつきが発生します。特に IE では特にアニメーションの見栄えが悪くなります。アニメート機能を使用してdivサイズを大きくすると、ちらつきが発生することがわかっています。この下のスクリプト アニメーションを非常に滑らかに見せる方法を教えてください。スクリプトで変更する必要があるコードを教えてください。結果として、同じように機能しますが、アニメーションはスムーズに見えます。私はちらつきを望んでいません。ありがとう
ここにデモのURLがありますhttp://jsfiddle.net/tridip/kPZrZ/2/
$(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;
});
});