首先,请温和。你即将被一些你见过的最丑陋的jquery暴露出来。JQuery不能在IE8中工作
这是我第一次尝试使用插件的Javascript/JQuery,所以对我来说这是一个陡峭的学习曲线。
我创建了一个使用jquery动画和淡出几个div的开场动画(在客户端的坚持)。
该脚本在Chrome,Firefox和Safari浏览器中正常工作,但在IE8中无法正常工作...... divs非常懒散地挂起。
下面是我在我的研究迄今所做的,没有快乐:
- 最新的jQuery(1.5)
- 脚本包在$(文件)。就绪(函数(){.. 。
- 类型=文本/ JavaScript的
另外,我还使用了一些其他的JavaScript(幻灯片和媒体播放器),在IE8正常工作。
关于如何让这个脚本在IE中工作的任何想法将不胜感激。
另外,请随时提供清理这个hacky代码的任何建议......就像我说的,这很丑陋。
走上代码:
脚本,位于文档的头部
<script type="text/javascript">
$(document).ready(function(){
$('#intro_finger_print')
.fadeOut(6500, function() {
});
$('#intro_black_bar').animate({
width: '+=1000',
}, 1000, function() {
// Animation complete.
});
$('#intro_black_bar').animate({
width: '+=0',
}, 1000, function() {
// Animation complete.
});
$('#intro_black_bar').animate({
marginTop: '-=83',
}, 1000, function() {
// Animation complete.
});
$('#intro_unique_fitouts').animate({
marginLeft: '-=1773',
}, 1000, function() {
// Animation complete.
});
$('#intro_unique_fitouts').animate({
width: '+=0',
}, 1000, function() {
// Animation complete.
});
$('#intro_unique_fitouts').animate({
marginTop: '-=83',
}, 1000, function() {
// Animation complete.
});
$('#intro_unique_fitouts').animate({
marginLeft: '=0',
}, 2000, function() {
// Animation complete.
});
$('#intro_unique_fitouts').animate({
marginLeft: '-=683',
}, 1000, function() {
// Animation complete.
});
$('#intro_black_bar').animate({
marginLeft: '+=0',
}, 2000, function() {
// Animation complete.
});
$('#intro_black_bar').animate({
marginLeft: '+=1683',
}, 1000, function() {
// Animation complete.
});
$('#intro_container')
.animate({
opacity: 1,
}, 6500, function() {
// Animation complete.
});
$('#intro_container')
.animate({
opacity: 0,
}, 1000, function() {
// Animation complete.
});
});
</script>
HTML:
CSS:
/* ANIMATION */
#intro_container {background-color:white; min-width:100%; min-height:100%; display:block; padding:0; margin:0 auto; position:fixed; left:0%; top:0%; z-index:1000;}
#intro_white_div {width:100%; background-color:white; margin:-20px 0 auto; display:block; min-height:900px; position:absolute; left:0%; margin-left:0px; overflow:hidden; background-image:url(../images/container_bg.jpg); background-repeat:repeat-x; margin-top:-15px;}
#intro_black_bar {width:0px; height:55px; display:block; background-color:none; background-image:url(../images/intro_black_strip.png); background-repeat:no-repeat; position:absolute; top:150px; left:50%; margin-left:-495px; z-index:1200;}
#intro_unique_fitouts {width:500px; float:right; background-image:url(../images/Unique_Fitouts_intro.png); background-repeat:no-repeat; z-index:1500; height:50px; background-color:none; margin-top:138px; margin-left:2097px; position:absolute;}
#intro_finger_print {height:580px; position:absolute; width:960px; left:50%; margin-left:-480px; background-image:url(../images/ThumbA4Black.png);background-position:bottom left; background-repeat:no-repeat;}
在此先感谢,
CB
对于一个初学者来说,它不是很差;) – 2011-02-15 20:58:52
您需要将正确的答案分配给某人的帮助! – 2013-02-07 17:22:33