1

嘿,我正在使用垂直选项卡列表创建选项卡式内容。我通过改变背景位置来做到这一点。它在 IE/CHROME 中运行良好,但在移动设备上浏览 safari 时,动画第一次运行良好,其他时候背景位置下降太多。

我添加了很多代码,但我认为问题不在于 HTML,因为它适用于其他浏览器,我刚刚发布了代码以供参考。

这是我的动画代码:

<!-- 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; }

有人可以告诉我我在做什么错吗?

如果你不明白我的意思,你可以在这里查看它,进入并点击开发服务。

4

2 回答 2

1

您已经硬编码了动画元素的位置。使用单击按钮的位置来计算结束位置。

示例:http: //jsbin.com/oteleh/3/edit#javascript,html

于 2012-07-03T10:37:16.873 回答
0

您要使用的是 CSS3 变换和过渡,而不是 jQuery 动画。通过这种方式,您可以在 iOS 和 Android 等移动设备上获得硬件加速性能。要移动元素,请使用 transform3d(即使是 2d 变换),您将获得最佳性能。

http://www.quora.com/Are-CSS3-transitions-in-WebKit-browsers-hardware-accelerated

于 2012-06-14T19:35:22.447 回答