動畫效果在iPhone上的移動Safari上不能很好地工作

嘿，我正在創建帶有垂直選項卡列表的選項卡式內容。我正在通過更改背景位置來完成此操作。它在IE/CHROME中運行良好，但是當通過移動設備上的Safari瀏覽器瀏覽時，動畫第一次運行良好，而其他時候背景位置下降得太多。動畫效果在iPhone上的移動Safari上不能很好地工作

我添加了很多代碼，但我認爲問題不在HTML中，因爲這在其他瀏覽器中可行，我剛剛發佈了refferance代碼。

這是我的動畫代碼：

<!-- This part is responsible for tabbed content --> 

    var $tabbed_area = jQuery('#side-tabs-tab ul'), 
     $tab_content = jQuery('.tab-content-tab'); 





        if ($tabbed_area.length) { 

      var animating = false, 
       divAnimated = false; 
      jQuery('body.home #main-area-tab').css('backgroundImage','none'); 
      $tab_content.hide().filter(':first').show(); 
      $tabbed_area.css({backgroundPosition: "0px 0px"}); 
      var isFirstUse = true; 
      $tabbed_area.find('li a').click(function(){ 
       this_element = jQuery(this); 

       tab_order = this_element.parent('li').prevAll().length; 
       previouslyActiveTab = jQuery('.tab-content-tab').filter(':visible').prevAll('.tab-content-tab').length; 

       if ((tab_order != previouslyActiveTab) && !animating) { 
        $tabbed_area.find('li a.activeTab').removeClass('activeTab'); 
        var marginDelimeter = 177; 


        if(parseInt(jQuery.browser.version, 10) == 7){ 
         marginDelimeter = 177; 
        } 

        activeTop = this_element.position().top - marginDelimeter; 
         if(navigator.userAgent.match(/iPhone/i)){ 
         //marginDelimeter = 213; 

         } 
        animating = true; 
        var $visibleDiv = $tab_content.filter(':visible'), 
         $divToAnimate = $tab_content.filter(':eq('+tab_order+')'); 


        $visibleDiv.fadeOut(500,function(){ 
         $visibleDiv.css({opacity:0}); 
         $divToAnimate.css({opacity:1}).fadeIn(500,function(){if (jQuery.browser.msie) this.style.removeAttribute('filter');}); 
         divAnimated = true; 
        }); 

        $tabbed_area.stop().animate({backgroundPosition:"(0px "+activeTop+"px)"}, 500,function(){ 
         this_element.addClass('activeTab'); 
         if (divAnimated) { 
          animating = false; 
          divAnimated = false; 
         } else { 
          var wait = setInterval(function() { 
           if (divAnimated) { 
            animating = false; 
            divAnimated = false; 
            clearInterval(wait); 
           }; 
          }, 100); 
         }; 
        }); 
       }; 

       return false; 
      }); 
     }; 
<!-- End of tabbed content -->

這是HTML：

<div id="side-tabs-tab"> 
    <ul style='padding:0px; padding-bottom: 20px;'> 
     <?php for ($i = 1; $i <= $featured_num; $i++) { ?> 
      <?php if ($arr[$i]["tabtitle"] == '') $arr[$i]["tabtitle"] = 'Tab Custom field'; ?> 
      <li class="clearfix"><a href="#" <?php if ($i == 1) echo(' class="activeTab"'); ?>><?php if($arr[$i]["thumb"] <> '') echo('<img src="'.esc_url($arr[$i]["thumb"]).'" alt="" width="36" height="37" />'); ?><span><?php echo(esc_html($arr[$i]["tabtitle"])); ?></span></a></li> 
     <?php }; ?> 
    </ul> 
</div> <!-- end #side-tabs --> 


<div id="main-area-tab"> 
    <?php for ($i = 1; $i <= $featured_num; $i++) { ?> 
     <div class="tab-content-tab<?php if ($i == 1) echo(' active'); ?>"> 
      <h2 class="title-tab"><?php echo(esc_html($arr[$i]["title"])); ?></h2> 
      <?php echo($arr[$i]["content"]); ?> 
      <!--<a href="<?php echo esc_url($arr[$i]["permalink"]); ?>" class="readmore-tab"><span><?php esc_html_e('Read More','MyAppTheme'); ?></span></a> --> 
     </div> <!-- end .tab-content --> 
    <?php }; ?> 
</div> <!-- end #main-area -->

這是一個有點混亂，與所有有關PHP的，但假設這口井輸出的一切。

最後CSS：

#side-tabs-tab {background:url(images/tabs-shadow-tab.png) no-repeat scroll 116px 0 transparent; float: left; width: 205px; height: 353px; margin-top: -3px; } 
    #side-tabs-tab ul {list-style: none; margin-top: 43px; margin-left: 12px; font-size: 16px; background:url(images/arrow-tab.png) no-repeat; padding-bottom: 20px; } 
       #side-tabs-tab ul li { margin-bottom: 10px; height: 40px; } 
        #side-tabs-tab ul li a {text-decoration: none; color: #202d37; text-shadow: 1px 1px 0px #e7eff2; display: block} 
         #side-tabs-tab ul li a img {padding-top: 3px; padding-left: 4px; float: left;} 
         #side-tabs-tab ul li a span {padding-left: 14px; float: left; display: block; padding-top: 12px;} 
        #side-tabs-tab ul li a.activeTab {width: 191px; color: #ffffff; text-shadow: 1px 1px 0px #3a515a; } 

     #main-area-tab {float: left; margin-top: 50px; margin-left: 29px; width:483px;} 
      #main-area-tab p { line-height: 18px; } 
      #main-area-tab .tab-content-tab {width: 424px;padding-right:45px;} 
       #main-area-tab .tab-content-tab h2.title-tab {font-weight: bold; font-size: 20px; margin-bottom: 20px; } 
       #main-area-tab .tab-content-tab p.post {line-height: 18px; padding-bottom: 23px; padding-top: 20px;} 

       blockquote {background: url(images/blockquote-tab.png) no-repeat; border: none; margin: 0px; padding-left: 55px;line-height: 18px; color: #202d37; text-shadow: 1px 1px 0px #e7ecee; padding-top: 12px; padding-bottom: 22px; background-position: 0px 15px; } 

       #main-area-tab a.readmore-tab { background: url(images/readmore-left-tab.png) no-repeat top right; display: block; height: 33px; padding-right: 18px; line-height: 35px; float: right; font-weight: bold; text-shadow: 1px 1px 0px #2d3a40; font-size: 11px; margin-bottom: 26px; margin-right: -36px; float: right; color: #c0cfd5;} 
        #main-area-tab a.readmore-tab span { display: block; background: url(images/readmore-right-tab.png) no-repeat; padding:0 6px 0 13px; height:33px; }

有人能告訴我什麼我做錯了什麼？

如果您不明白我的意思，您可以在Here的活動中查看它，然後點擊開發服務。

來源

2012-06-14 eric.itzhak