他,那里,我一直在努力工作几个小时没有任何线索(我正在使用Wordpress),很难知道jQuery有什么问题。 Windows / Mac中的FF和Chrome工作正常,IE让我发疯。
我在标题中使用:
<!DOCTYPE html>
这是我正在进行测试的网站:
这是我的JS代码:
jQuery(document).ready(function() {
//Menu
jQuery("ul.menu").superfish({
delay : 100,
animation : {opacity:'show',height:'show'},
//speed : 10,
autoArrows : true,
dropShadows : false
});
//Popup FancyBox
jQuery('.fancybox-media').fancybox({
maxWidth : 800,
maxHeight : 600,
fitToView : false,
width : '70%',
height : '70%',
autoSize : false,
closeClick : false,
openEffect : 'none',
closeEffect : 'none'
});
jQuery('.fancybox').fancybox();
var thumbnails = 'a:has(img)[hrefjQuery=".jpg"]';
jQuery(thumbnails).addClass("fancybox").attr("rel","fancybox");
jQuery(".popup").fancybox({
'width' : '75%',
'height' : '75%',
'autoScale' : false,
'transitionIn' : 'none',
'transitionOut' : 'none',
'type' : 'iframe'
});
//Expand
jQuery('div.moexpander').hide();
jQuery('a.moexpander').click(function(){
jQuery(this).parent().next('div.moexpander').slideToggle();
return false;
});
//Slideshow Destacados, Create an array of titles
var titles = jQuery('#cycle div.item').find("h3").map(function() { return jQuery(this).text(); });
//Add an unordered list to contain the navigation
//Invoke the cycle plugin on #cycle
jQuery('#cycle').before('<ul id="pager" class="sprites bannerBg"></ul>').cycle({
//Specify options
fx :'fade', //Name of transition effect
speed : 600,
delay : -1200,
pause : 1,
pager : '#pager', //Selector for element to use as pager container
pagerAnchorBuilder: function (index) { //Build the pager
return '<li><a href="#">' + titles[index] + '</a></li>';
},
updateActivePagerLink: function(pager, currSlideIndex) {
jQuery(pager).find('li').removeClass('active').filter('li:eq('+currSlideIndex+')').addClass('active');
}
});
jQuery('#cycle').hover(function() {
jQuery('.pause').show();
}, function() {
jQuery('.pause').hide();
});
//Slideshow Voluntariado
jQuery('#cyclePopular').after('<div id="navPopular">')
.cycle({
fx : 'scrollHorz',
speed : 'fast',
delay : -1200,
pause : 1,
pager : '#navPopular'
});
//Slideshow Avisos
jQuery('#cycleAvisos').cycle({
fx : 'scrollHorz',
delay : -4000,
pause : 1,
prev: '#prev',
next: '#next',
pager : '#navAvisos',
after: onAfter
});
//Make Avisos's Height auto-resizing
function onAfter(curr, next, opts, fwd) {
var jQueryht = jQuery(this).height();
//set the container's height to that of the current slide
jQuery(this).parent().animate({height: jQueryht});
}
//Make all the block clickable
jQuery("#link").click(function(){
window.location=jQuery(this).find("a").attr("href");
return false;
});
//Add CSS to Sidebar Pages
jQuery('#sidebar-pages').find("li").before("<span class='sprites bulletR left'></span>");
// Tabs
jQuery.fn.easytabs = function(){
//Default Action
jQuery(this).find(".easytabs_content").hide(); //Hide all content
jQuery(this).find("ul.easytabs li:first").addClass("active").show(); //Activate first tab
jQuery(this).find(".easytabs_content:first").show(); //Show first tab content
jQuery(this).find(".easytabs_content li a").before("<span class='sprites bulletR'></span>"); //Show bullets
//On Click Event
jQuery("ul.easytabs li").click(function() {
jQuery(this).parent().parent().find("ul.easytabs li").removeClass("active"); //Remove any "active" class
jQuery(this).addClass("active"); //Add "active" class to selected tab
jQuery(this).parent().parent().find(".easytabs_content").hide(); //Hide all tab content
var activeTab = jQuery(this).find("a").attr("href"); //Find the rel attribute value to identify the active tab + content
jQuery(activeTab).fadeIn(); //Fade in the active content
return false;
});
};//end function
jQuery("div[class^='easytabs']").easytabs(); //Run function on any div with class name of "easytabs"
// Search animation with IE statements
var input = jQuery('input#s');
var divInput = jQuery('div.input');
var width = divInput.width();
var outerWidth = divInput.parent().width() - (divInput.outerWidth() - width) - 28;
var submit = jQuery('#searchSubmit');
var txt = input.val();
input.bind('focus', function() {
if(input.val() === txt) {
input.val('');
}
jQuery(this).animate({color: '#000'}, 300); // text color
jQuery(this).parent().animate({
width: outerWidth + 'px',
backgroundColor: '#fff', // background color
paddingRight: '43px'
}, 300, function() {
if(!(input.val() === '' || input.val() === txt)) {
if(!(jQuery.browser.msie && jQuery.browser.version < 9)) {
submit.fadeIn(300);
} else {
submit.css({display: 'block'});
}
}
}).addClass('focus');
}).bind('blur', function() {
jQuery(this).animate({color: '#b4bdc4'}, 300); // text color
jQuery(this).parent().animate({
width: width + 'px',
backgroundColor: '#e8edf1', // background color
paddingRight: '15px'
}, 300, function() {
if(input.val() === '') {
input.val(txt)
}
}).removeClass('focus');
if(!(jQuery.browser.msie && jQuery.browser.version < 9)) {
submit.fadeOut(100);
} else {
submit.css({display: 'none'});
}
}).keyup(function() {
if(input.val() === '') {
if(!(jQuery.browser.msie && jQuery.browser.version < 9)) {
submit.fadeOut(300);
} else {
submit.css({display: 'none'});
}
} else {
if(!(jQuery.browser.msie && jQuery.browser.version < 9)) {
submit.fadeIn(300);
} else {
submit.css({display: 'block'});
}
}
});
});
我真的很感谢你的帮助,
·H·
答案 0 :(得分:1)
我看到IE不支持(或完全支持)两个方法调用:
.hover
.slideToggle
所有toggle
函数都有粗略/不一致的跨浏览器支持。我会尝试改变这一点,特别是因为slide
效果实际上具有所有jQuery效果的一些最高开销,并且在慢速浏览器(如IE - 尤其是旧版本)上显而易见。
至于.hover
,我建议您阅读并使用.mouseenter
,.mouseleave
,.mousein
和.mouseout
的组合。我不记得哪一个,但.hover
实际上是其中两个的缩写,但对它的支持是粗略的。其中一个集合特别基于IE的内置设置,我不认为它是.hover
的简称。
更新1:
根据您的反馈,我建议您搜索.superFish
和fancybox
插件'源代码,以确保他们不会fadeTo
使用opacity
因为这会完全破坏你的脚本,并且他们使用与IE兼容的正确opacity
操作技术。
更新2:
您的.map()
方法也是错误的。从其余代码中,我可以看到您正在尝试创建一个vanilla JavaScript数组,而不是jQuery数组。因此,您必须在.get()
之后致电.map()
。我找到了answer to another post进一步解释了这一点。
更新3:
我希望我不是很傻,但我注意到这一行:
jQuery('div.moexpander').hide();
在为jQuery('div.moexpander')
设置点击处理程序之前,您已经拥有了。问题是,我没有看到任何地方显示jQuery('div.moexpander')
。如果我是正确的,并且之后您没有再显示它,则div.moexpander
元素将永远不会显示,并且永远不会使用处理程序。我不知道这对您的代码/问题有多重要,因为我仍然不知道您的症状,但这很可能是一个错误。
更新4:
此外,只要我们正在调试,您应该运行代码并使用分号终止每个函数声明。例如,更改:
function someFunct() {
.....
}
到
function someFunct() {
.....
};
尽管JavaScript中不需要这样做,但是在很多情况下这会影响/影响您的脚本,并且在某些情况下会使它们崩溃。
老实说,我不完全理解为什么会这样,但我遇到过这个问题的情况,我相信其中一些问题出现在IE中。
更新5:
如果仍然无效,请查看jQuery论坛上的this thread,该论坛处理涉及fancyBox的IE加载问题。