1
안녕하세요 세로 탭 목록이있는 탭으로 구성된 콘텐츠를 만들고 있습니다. 배경 위치를 변경하여이 작업을 수행하고 있습니다. IE/Chrome에서 정상적으로 작동하지만 휴대 기기의 Safari를 탐색 할 때 애니메이션이 처음에는 잘 작동하고 다른 시간에는 배경 위치가 너무 많이 떨어집니다.iPhone에서 모바일 사파리에서 제대로 작동하지 않는 애니메이션
많은 코드가 추가되었지만 다른 브라우저에서 작동하므로 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에 살고있는 것을보고 개발 서비스를 클릭하십시오.
이 댓글을 수 shuold, 내가 jQuery를하지 CSS3를 사용하려는 이유가 있고, 난 그냥 이해할 수없는 최적의 성능을 위해 찾는 게 아니에요 내 문제는 코드에 있습니다. –