为什么我的jQuery不能用于IE(在Safari,Chrome和FF中工作正常)?

时间:2013-04-11 16:18:42

标签: jquery windows wordpress internet-explorer

他,那里,我一直在努力工作几个小时没有任何线索(我正在使用Wordpress),很难知道jQuery有什么问题。 Windows / Mac中的FF和Chrome工作正常,IE让我发疯。

我在标题中使用:

<!DOCTYPE html>

这是我正在进行测试的网站:

http://newportal.no-ip.org/

这是我的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·

1 个答案:

答案 0 :(得分:1)

我看到IE不支持(或完全支持)两个方法调用:

  • .hover
  • .slideToggle

所有toggle函数都有粗略/不一致的跨浏览器支持。我会尝试改变这一点,特别是因为slide效果实际上具有所有jQuery效果的一些最高开销,并且在慢速浏览器(如IE - 尤其是旧版本)上显而易见。

至于.hover,我建议您阅读并使用.mouseenter.mouseleave.mousein.mouseout的组合。我不记得哪一个,但.hover实际上是其中两个的缩写,但对它的支持是粗略的。其中一个集合特别基于IE的内置设置,我不认为它是.hover的简称。


更新1:

根据您的反馈,我建议您搜索.superFishfancybox插件'源代码,以确保他们不会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加载问题。