我有一个jQuery脚本,除了IE浏览器,在所有的浏览器中工作得很好。它的一部分工作在IE中,但主要部分没有,我不知道为什么。jquery脚本在所有浏览器中工作,但IE 8
$(document).ready(function() {
$(".close").hover(
function() {
$(this).css({
opacity: "0.4"
});
}, function() {
$(this).css({
opacity: "0.2"
});
});
$(".name").hover(
function() {
$(this).css({
color: "#ED6736"
});
}, function() {
$(this).css({
color: "#292929"
});
});
$("#wrapper_MAIN_INPT").css({
'height': $("#practice_staff_MAIN_INPT").innerHeight()
});
$("#STAFF_HEADER_MAIN_INPT").css({
'marginTop': $("#practice_staff_MAIN_INPT").innerHeight()
});
$("#BIO_MAIN_INPT").css({
'marginTop': $("#practice_staff_MAIN_INPT").height()
});
$("#EDU_MAIN_INPT").css({
'marginTop': $("#practice_staff_MAIN_INPT").height()
});
$("#CONTACT_MAIN_INPT").css({
'marginTop': $("#practice_staff_MAIN_INPT").height()
});
var a1, a2, a3; //Establish Loading Variables
$(".name_MAIN_INPT").on('click' , function() {
MAIN_OUTPT_close();
close_850();
FOX_close();
SPEECH_close();
a1=0; //Reset the Loading Variables
a2=0;
a3=0;
var id = $(this).attr('id');
$('#photo_MAIN_INPT').empty();
$("<img>", { src: id + ".jpg" }).prependTo("#photo_MAIN_INPT");
$("#therapist_MAIN_INPT").load(id +"_name.txt");
$("#credentials_MAIN_INPT").load(id +"_credentials.txt");
$("#bio_MAIN_INPT_text").load(id +"_bio.txt", function() {
$("#bio_MAIN_INPT_img").css({
'marginTop': ($("#bio_MAIN_INPT_text").innerHeight() /2) -
($("#bio_MAIN_INPT_img").height()/2)
});
console.log('Loaded'); //Testing Purposes Only
a1=1; // Loaded
animate_MAIN_INPT(); // Attempt Animation
});
$("#edu_MAIN_INPT_text").load(id +"_edu.txt", function() {
$("#edu_MAIN_INPT_img").css({
'marginTop': ($("#edu_MAIN_INPT_text").innerHeight() /2) -
($("#edu_MAIN_INPT_img").height()/2)
});
console.log('Loaded'); //Testing Purposes Only
a2=1; // Loaded
animate_MAIN_INPT(); // Attempt Animation
});
$("#contact_MAIN_INPT_text").load(id +"_contact.txt", function() {
$("#contact_MAIN_INPT_img").css({
'marginTop': ($("#contact_MAIN_INPT_text").innerHeight() /2) -
($("#contact_MAIN_INPT_img").height()/2)
});
console.log('Loaded'); //Testing Purposes Only
a3=1; // Loaded
animate_MAIN_INPT(); // Attempt Animation
});
});
function animate_MAIN_INPT() {
if((a1===1) && (a2===1) && (a3===1)){ //Animate if all thre divs are loaded
$("#wrapper_MAIN_INPT").animate({
'height': 87 + $("#BIO_MAIN_INPT").outerHeight() + $("#EDU_MAIN_INPT").outerHeight()
+ $("#CONTACT_MAIN_INPT").outerHeight()
}, 300);
$("#practice_staff_MAIN_INPT").animate({
'margin-top': $("#practice_staff_MAIN_INPT").innerHeight() * -1
}, 300);
$("#STAFF_HEADER_MAIN_INPT").delay(160).animate({
'marginTop': 15
}, 300);
$("#BIO_MAIN_INPT").delay(330).animate({
'marginTop': 0
}, 450);
$("#EDU_MAIN_INPT").delay(450).animate({
'marginTop': 0
}, 450);
$("#CONTACT_MAIN_INPT").delay(570).animate({
'marginTop': 0
}, 450);
}
}
function MAIN_INPT_close() {
$("#wrapper_MAIN_INPT").animate({
'height': $("#practice_staff_MAIN_INPT").innerHeight()
}, 300);
$("#practice_staff_MAIN_INPT").animate({
'margin-top':0
}, 300);
$("#STAFF_HEADER_MAIN_INPT").animate({
'marginTop': $("#practice_staff_MAIN_INPT").innerHeight()
}, 300, function() {
$("#STAFF_HEADER_MAIN_INPT").css({
'marginTop': $("#practice_staff_MAIN_INPT").innerHeight()
});
$("#BIO_MAIN_INPT").css({
'marginTop': $("#practice_staff_MAIN_INPT").height()
});
$("#EDU_MAIN_INPT").css({
'marginTop': $("#practice_staff_MAIN_INPT").height()
});
$("#CONTACT_MAIN_INPT").css({
'marginTop': $("#practice_staff_MAIN_INPT").height()
});
});
}
$("#close_MAIN_INPT").click(function() {
MAIN_INPT_close();
});
});
下面是在IE中的链接整版这里http://www.brighamandwomens.org/Patients_Visitors/pcs/rehabilitationservices/mock/about_us/about3.html这项工作变为橙色当你翻身他们,你可以看到他们在火狐,Chrome,Safari浏览器的工作名称的链接,但再次没有运气。任何帮助将是伟大的,谢谢。
哪部分不起作用?我们是否真的需要所有的代码? –
我实际上做得更少,动画不会在点击上发生,但翻转工作正常。我不确定究竟是什么不工作。 – loriensleafs
看起来您正在尝试在装入元素之前对元素进行动画制作,它是否刚刚出现,而不是为您设置动画效果? (我无法到达您的网站) –