2

免責事項: 私は比較的 jQuery と JavaScript に慣れていません。以下の openStatement() 関数は、#statementTab がまだ開いていないと判断されるたびに実行されます。以下のコードだけでは不十分な場合は、以下のソースを確認してください。

基本的に、さまざまなタブを含む UL は、ユーザーが #statementTab を開くたびにちらつき、消えます。これを修正したいと思います。

ソース: http://www.cameronhermens.com/dbunkr/brochure.html

// The openStatement function opens the statement tab when the user clicks 
<a id="openIt"> (if the statement tab isn't already open).

function openStatement() {
    $('#explore').animate({width: '70%'}, '200');
    $('#statementTab').animate({width: '213px'}, '1000');
};

// Here's the DIV.
<div id="explore" class="brochure">
  <ul id="brochureTab">
    <li><a href="welcome.html" >welcome</a></li>
    <li><a href="ourMission.html">our mission</a></li>
    <li><a href="whatIsdBunkr.html">what is dBunkr</a></li>
  </ul>
</div>

<div id="statementTab">
  <a id="openIt">
    <img class="opaque left-5" src="images/rightArrow.jpg" height="10" width="6" alt="Expand the Statement tab">
    <span class="statementBar">Statements</span>
  </a>
</div>
4

2 に答える 2

3

アニメーション中は、jQuery が のスタイルを適用しているためUL#brochureTab、アニメーション中に非表示になっています。このスタイルは、アニメーションの完了時に削除されます。#exploreoverflow: hidden

簡単な解決策 (つまり、要素の残りのスタイルを設定した方法に対処しない場合) は、スタイルoverflow: visible !important;をに追加すること#exploreです。

于 2012-05-30T20:32:45.387 に答える
1

CSS を使用して外部ul#brochureTabを取得します。div#exploretop: -45px;

div#explorejQuery .animate() でアニメーション化するたびに、アニメーションの実行中に jQuery .animate()が自動的に切り替わるul#brochureTabため、 が「フラッシュ」されます。overflow:"hidden"

DIV解決策は、 のラッパーとして機能するを使用し、div#exploreで取得した視覚的な外観を使用することdiv#exploreです。

CSS

#wrapper {
    background-color: #FFFFFF;
    border: 3px solid #CCCCCC;
    border-radius: 7px 7px 7px 7px;
    box-shadow: 3px 3px 3px #CCCCCC;
    float: left;
    height: inherit;
    padding: 5px;
}

マークアップは次のようになります。

<div id="wrapper">
  <div id="explorer">
    <ul id="brochureTab">
      <li>...</li>
      <li>...</li>
      <li>...</li>
    </ul>
    <div id="ui-tabs-3">...</div>
    <div id="ui-tabs-10">...</div>
    <div id="ui-tabs-12">...</div>
  </div>
  <div id="statementTab">...</div>
</div>

そして点滅を防ぐために：

#brochureTab {
  float: left;
  left: 10px;
  list-style: none outside none;
  margin: 0;
  padding: 0;
  position: relative;
  /* top: -45px; remove this line */
}

.ui-tabs-panel {
  background: none repeat scroll 0 0 #FFFFFF;
  border: 2px solid #CCCCCC;
  float: left;
  left: 30px;
  margin: 0 auto 30px;
  min-height: 410px;
  padding: 10px;
  position: relative;
  /* top: -20px; remove this line */
  width: 90%;
  z-index: 1;
}

現在のアニメーション方法を変更する必要はありません。

CSSラッパーの新しいものには、「調整」が必要になる場合があります。

于 2012-05-30T20:36:21.630 に答える