我已经创建了一个扩展的DIV（contentright），当DIV扩展时。我也在扩展一些图像。当这个动画发生时。它生涩而且不光滑。我知道我一下子会做一些动画。但我现在应该能够顺利完成这项工作吗？
我更新到最新的jquery版本1.7.1并且帮助了一些。
在这里您可以看到正在运行的页面： http://4wproductions.com/reels.php
// JavaScript Document
$(document).ready(function() {
var Toggled = false;
if ($('#homepage').length > 0) {
$('.mframe').css('display', 'none');
$('.header').css('width', 0);
$('.footer').css('width', 0);
$('.hcontact').css('display', 'none');
$('.fwlogo').css('display', 'none');
$('.menuframe').css('height', 0);
$('.menuframebg').css('backgroundColor', '#FFFFCC');
$('.footerbg').css('background-color', '#FFFFCC');
$('.footertext').css('display', 'none');
$('.menuback').hide(0);
$('.menuback').css('height', 0);
$('.menuback').css('top', 445);
$('.menudivide').css('width', 0);
$('.menudividesocial').css('display', 'none');
$('.menulink').css('display', 'none');
$('.contentright').css('display', 'none');
$('.contentcolumn').css('display', 'none');
$('.focusmenu').css('display', 'none');
$('.focusmenuf').css('display', 'none');
$('.focusmenul').css('display', 'none');
$('.adfooter').css('display', 'none');
$('.copy').css('display', 'none');
$('.mframe').fadeIn(450,
function() { $('.header').animate({width: '770px'}, 550);
$('.footer').animate({width: '770px'}, 550,
function() { $('.menuframe').animate({height: '360px'}, 550);
$('.footerbg').animate({backgroundColor: '#9FAD3D'}, 750);
$('.footertext').fadeIn(750);
$('.fwlogo').fadeIn(750);
$('.hcontact').fadeIn(750,
function() { $('.menuback').show(0);
$('.menuback').animate({height: '360px', top: '85px'}, 400);
$('.menudivide').animate({width: '259px'}, 450);
$('.menuframebg').animate({backgroundColor: '#F1E190'}, 450,
function() { $('.menulink').fadeIn(450);
$('.menudividesocial').fadeIn(450);
$('.contentright').fadeIn(700,
function() { $('#column1').fadeIn(400,
function() { $('#column2').fadeIn(400,
function() { $('.focusmenu').fadeIn(800);
$('.focusmenuf').fadeIn(800);
$('.focusmenul').fadeIn(800,
function() { $('.adfooter').fadeIn(500,
function() { $('.copy').fadeIn(500)
});
});
});
});
});
});
});
});
});
} else if ($('#about').length > 0) {
$('.contentrighttext').css('display', 'none');
$('#contenth1').css('display', 'none');
$('.contentrighttext').fadeIn(2000);
$('#contenth1').fadeIn(2000);
} else if ($('#services').length > 0) {
$('#contenth1').css('display', 'none');
$('#contentlmenu1').css('display', 'none');
$('#contentlmenu2').css('display', 'none');
$('#contentlmenu3').css('display', 'none');
$('#contentlmenu4').css('display', 'none');
$('#commercials').css('display', 'none');
$('#commercialsimg').css('display', 'none');
$('#filmsimg').css('display', 'none');
$('#locationsimg').css('display', 'none');
$('#marketingimg').css('display', 'none');
$('#films').css('display', 'none');
$('#locations').css('display', 'none');
$('#marketing').css('display', 'none');
$('#contenth1').fadeIn(1500,
function() { $('#contentlmenu1').slideToggle(400,
function() { $('#contentlmenu2').slideToggle(400,
function() { $('#contentlmenu3').slideToggle(400,
function() { $('#contentlmenu4').slideToggle(400)
});
});
});
});
$('#contentmenu1').click( function() {
$('#contentlmenu2').slideToggle(400);
$('#contentlmenu3').slideToggle(400);
$('#contentlmenu4').slideToggle(400);
if (Toggled == false) {
$(this).text('<');
Toggled = true;
$('#commercialsimg').fadeIn(800);
} else {
$(this).text('>');
Toggled = false;
$('#commercialsimg').hide(200);
}
$('#commercials').fadeToggle(600);
});
$('#contentmenu2').click( function() {
$('#contentlmenu1').slideToggle(600);
$('#contentlmenu3').slideToggle(600);
$('#contentlmenu4').slideToggle(600);
if (Toggled == false) {
$(this).text('<');
Toggled = true;
$('#filmsimg').fadeIn(800);
} else {
$(this).text('>');
Toggled = false;
$('#filmsimg').hide(200);
}
$('#films').fadeToggle(600);
});
$('#contentmenu3').click( function() {
$('#contentlmenu1').slideToggle(600);
$('#contentlmenu2').slideToggle(600);
$('#contentlmenu4').slideToggle(600);
if (Toggled == false) {
$(this).text('<');
Toggled = true;
$('#locationsimg').fadeIn(800);
} else {
$(this).text('>');
Toggled = false;
$('#locationsimg').hide(200);
}
$('#locations').fadeToggle(600);
});
$('#contentmenu4').click( function() {
$('#contentlmenu1').slideToggle(600);
$('#contentlmenu2').slideToggle(600);
$('#contentlmenu3').slideToggle(600);
if (Toggled == false) {
$(this).text('<');
Toggled = true;
$('#marketingimg').fadeIn(800);
} else {
$(this).text('>');
Toggled = false;
$('#marketingimg').hide(200);
}
$('#marketing').fadeToggle(600);
});
} else if ($('#projects').length > 0) {
$('#contenth1').css('display', 'none');
$('#contentlmenu1').css('display', 'none');
$('#contentlmenu2').css('display', 'none');
$('#sc_graphicimg').css('display', 'none');
$('#twosouls_graphicimg').css('display', 'none');
$('#sc_graphic').css('display', 'none');
$('#twosouls_graphic').css('display', 'none');
$('#contenth1').fadeIn(1500,
function() { $('#contentlmenu1').slideToggle(400,
function() { $('#contentlmenu2').slideToggle(400)
});
});
$('#contentmenu1').click( function() {
$('#contentlmenu2').slideToggle(600);
if (Toggled == false) {
$(this).text('<');
Toggled = true;
$('#sc_graphicimg').fadeIn(800);
} else {
$(this).text('>');
Toggled = false;
$('#sc_graphicimg').hide(200);
}
$('#sc_graphic').fadeToggle(600);
});
$('#contentmenu2').click( function() {
$('#contentlmenu1').slideToggle(600);
if (Toggled == false) {
$(this).text('<');
Toggled = true;
$('#twosouls_graphicimg').fadeIn(800);
} else {
$(this).text('>');
Toggled = false;
$('#twosouls_graphicimg').hide(200);
}
$('#twosouls_graphic').fadeToggle(600);
});
} else if ($('#reels').length > 0) {
$('.bvideot').fadeOut(0);
$('#contenth1').css('display', 'none');
$('.vimeopreview').css('display', 'none');
for (i=1; i <=tvideo; i++) {
$('#v' + i).css('display', 'none');
}
$('#videoexpand').fadeOut(0);
$('#videocollapse').fadeOut(0);
$('#contenth1').delay(600).fadeIn(1500,
function() {
$('.vimeopreview').css('display', 'inline-block');
$('.videoplayer').css('top', '120px');
$('.videoplayer').css('left', '120px');
$('.vimeoptext').css('width', '700px');
$('.contentright').animate({
top: '15px',
right: '25px',
width: '720px',
height: '500px'
}, 1500,
function() {
$('.contentright').css('border', '1px solid #CC9900');
$('#videocollapse').fadeIn(500);
});
$('.contentrighttext').animate({
width: '690px',
height: '465px'
}, 1500);
$('.vimeopreview').animate({
width: '125px',
height: '110px'
}, 1500);
$('.videolink img').animate({
width: '125px',
height: '110px',
'max-width' : '125px',
'max-height' : '100px'
}, 1500);
});
$('#videocollapse').click(
function() {
$('.contentright').css('border', 'none');
$('.videoplayer').css('top', '45px');
$('.videoplayer').css('left', '10px');
$('.vimeoptext').css('width', '490px');
$('.contentright').animate({
top: '85px',
right: '0px',
width: '510px',
height: '320px'
}, 1500);
$('.contentrighttext').animate({
width: '480px',
height: '285px'
}, 1500);
$('.vimeopreview').animate({
width: '65px',
height: '50px'
}, 1500);
$('.videolink img').animate({
width: '65px',
height: '50px',
'max-width' : '65px',
'max-height' : '50px'
}, 1500);
$('#videocollapse').fadeOut(500,
function() {
$('#videoexpand').fadeIn(500)
});
});
$('#videoexpand').click(
function() {
$('.videoplayer').css('top', '120px');
$('.videoplayer').css('left', '120px');
$('.vimeoptext').css('width', '700px');
$('.contentright').animate({
top: '15px',
right: '25px',
width: '720px',
height: '500px'
}, 1500,
function() {
$('.contentright').css('border', '1px solid #CC9900');
});
$('.contentrighttext').animate({
width: '690px',
height: '465px'
}, 1500);
$('.vimeopreview').animate({
width: '125px',
height: '110px'
}, 1500);
$('.videolink img').animate({
width: '125px',
height: '110px',
'max-width' : '125px',
'max-height' : '100px'
}, 1500);
$('#videoexpand').fadeOut(500,
function() {
$('#videocollapse').fadeIn(500);
});
});
$('.videolink').hover(
function() {
var vt = this.id;
$('#' + vt + 'text').css('display', 'block');
},
function() {
var vt = this.id;
$('#' + vt + 'text').css('display', 'none');
});
$('.videolink').click(
function() {
var id = $(this).attr("id");
var idn = id.match(/[0-9]+/);
$('.vimeopreview').fadeOut(600,
function() { $('#v' + idn).fadeIn(600)
});
});
$('.vlinkback').click(
function() {
var bid = $(this).attr("id");
var bidn = bid.match(/[0-9]+/);
$('#v' + bidn).fadeOut(600,
function() { $('.vimeopreview').fadeIn(600)
});
});
}
});
答案 0 :(得分：0)
您可以尝试将外部div内的所有内容切换为百分比宽度，而不是固定宽度，然后只需更改为外部div大小。
浏览器仍有很多工作要做，但它应该改进。它还有一个额外的好处，就是不会真的复杂！