2013-04-11 45 views
0

他,在那里,我一直在尝试几个小时没有线索(我使用Wordpress),很难知道jQuery有什么问题。在Windows/Mac的FF和Chrome工作正常,IE让我疯狂。为什么我的jQuery不适用于IE(在Safari,Chrome和FF中正常工作)?

我使用的标题:

<!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·

+3

你检查过你的控制台吗?你有错误吗?什么不工作? – Dom 2013-04-11 16:20:22

+1

哪个功能不起作用?他们全部? – TiagoBrenck 2013-04-11 16:22:52

+4

什么版本的jQuery?什么版本的IE? – doublesharp 2013-04-11 16:24:25

回答

1

我看到,没有得到很好的支持IE(或支撑在全部)2个方法的调用:

  • .hover
  • .slideToggle

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

至于.hover,我建议你上阅读和使用的.mouseenter.mouseleave.mousein.mouseout的组合。我不记得哪个,但其中两个实际上是短手,但对它的支持很粗糙。其中之一是基于IE的内置设置,我不认为这是.hover的缩写。


更新1:

根据您的意见,我会建议为你搜索.superFishfancybox插件的源代码,以确保它们不使用fadeToopacity,作为将完全破坏您的脚本,并且他们使用正确的操作技术,即与IE兼容的操作技术。

更新2:

.map()方法也是错误的。从其他代码中,我可以看到您正在尝试创建一个vanilla JavaScript数组,而不是一个jQuery数组。因此,您必须在.map()之后拨打.get()。我发现一个answer to another post,进一步解释这一点。

更新3:

我希望我不傻,但我注意到这条线:

jQuery('div.moexpander').hide(); 
你有你建立一个点击处理程序 jQuery('div.moexpander')权利之前

。问题是,我没有看到任何地方打电话给jQuery('div.moexpander')。如果我是正确的,并且之后没有再显示它,则div.moexpander元素将永远不会显示,并且处理程序将永远不会被使用。我不知道这对你的代码/问题有多重要,因为我仍然不知道你的症状,但这可能是一个错误。

UPDATE 4:

而且,只要我们正在调试,您应该通过您的代码运行,并终止与分号每个函数声明。例如,更改:

function someFunct() { 
    ..... 
} 

function someFunct() { 
    ..... 
}; 

虽然这不是在JavaScript中必需的,但在此将影响/影响你的脚本,并在某些情况下,许多情况下,崩溃他们。

说实话,我不完全明白为什么会出现这种情况,但我遇到过这种情况,我认为其中一些问题出现在IE中。

更新5:

如果仍然没有工作,在jQuery的论坛,与涉及的fancybox IE加载问题涉及退房this thread

+0

请问为什么你认为'hover()'和'slideToggle()'在IE中被破坏?根据我的经验,他们在6到10(jQuery 1.9)或9到10(jQuery 2.0)的IE上工作得很好。 – 2013-04-11 16:28:46

+0

让我试试你的解决方案。感谢您的回复。 – Huroman 2013-04-11 16:31:59

+0

@FrédéricHamidi - 自1.8.3+版本以来,我还没有评论'.hover'和'.slideToggle'的更新,因为我在1.7.2中停止使用它们,并且在那段时间之间没有更新(或者至少没有更新)和1.8.2。自那时起可能引入新的变化,但是,特别是由于OP没有指定版本,我认为这是明智的。要直接回答你的问题,所有'toggle'方法都存在跨浏览器问题,特别是在IE中。如果事件快速重复,或者页面的脚本需要大量开销,这些问题会变得更糟。 – 2013-04-11 16:33:46

相关问题