jQuery动画不能在Firefox的IE中工作

jQuery animate not working in IE of Firefox?

本文关键字：IE 工作 Firefox 动画 不能 jQuery      更新时间：2023-09-26

我有一个功能，我想滚动我的网页水平，我有以下工作良好的Chrome只有它绊倒，当我来测试它在Firefox和Internet Explorer。有人能看出我的语法中有什么明显的错误吗?

/* Navigtion */
$('nav ol li a').click(function(e){
    e.preventDefault();
    $('nav').find('.active').removeClass('active'); 
    $(this).addClass('active'); 

    if( $(this).hasClass('sectionOne') ){
        scrollTo = $('.section-one').position().left;             
        $('body').animate({'scrollLeft': scrollTo}, 800);
    } else if( $(this).hasClass('sectionTwo') ){
        scrollTo = $('.section-two').position().left;             
        $('body').animate({'scrollLeft': scrollTo}, 800);
    } else if( $(this).hasClass('sectionThree') ){
        scrollTo = $('.section-three').position().left;             
        $('body').animate({'scrollLeft': scrollTo}, 800);
    } else if( $(this).hasClass('sectionFour') ){
        scrollTo = $('.section-four').position().left;             
        $('body').animate({'scrollLeft': scrollTo}, 800);
    } else if( $(this).hasClass('sectionFive') ){
        scrollTo = $('.section-five').position().left;             
        $('body').animate({'scrollLeft': scrollTo}, 800);
    } else if( $(this).hasClass('sectionSix') ){
        scrollTo = $('.section-six').position().left;             
        $('body').animate({'scrollLeft': scrollTo}, 800);
    } else if( $(this).hasClass('sectionSeven') ){
        scrollTo = $('.section-seven').position().left;             
        $('body').animate({'scrollLeft': scrollTo}, 800);
    }

});

不同的浏览器将滚动条附加到不同的元素上，你必须这样做

$('html, body').animate({'scrollLeft': scrollTo}, 800);

试着找出一个比所有这些if/else语句更好的方法，这里有一个例子。

为锚添加数据属性

<nav>
   <ol>
      <li>
         <a data-section="section-one" ....

，你可以删除所有的if/else，用两行

做同样的事情
var scrollTo = $('.' + $(this).data('section')).position().left;             
$('html, body').animate({'scrollLeft': scrollTo}, 800);

try:

$('body').animate({'scrollLeft': scrollTo}, 800);
$('html').animate({'scrollLeft': scrollTo}, 800);

有的浏览器支持'html'，有的支持'body'

相关文章：