1

私はこれに1週間ほど取り組んできましたが、うまくいく解決策がありますが、うまくいきません。

その上にタブのようなボタンがある非表示のフッターがあります。このボタンをクリックすると、フッターが上にスライドし、そのボタンも押し上げます。

私の問題は、ボタンをフッター内に配置できないことが原因です。フッターはクリックされるまで非表示になっているため、ボタンも非表示になります。

私が試した方法の 1 つは、フッターを非表示にする代わりに、ネガを配置して、bottomクリックするまで非表示にすることでした。これはうまく機能していましたが、クリックすると下にスクロールするだけで、その後非表示になることはありませんでした。

次に、非表示/表示する必要があると判断しましたが、これがボタンで問題が発生した場所です。フッターが非表示になっているため、フッター内にボタンを配置できません。ボタンはフッターの外側にあるので、アニメーション化しようとしましたが、同時にアニメーション化されず、非常に奇妙でした。

私が行った最終的な解決策はcss3イージングを使用することでしたが、フラッシュされていないため、まだ完全ではなく、使用することさえできません.

私は、それらが 1 つのオブジェクトであるかのように見えながら、正確な時間に両方をアニメーション化しようとしています。

これが私のHTML

<span class="fTab">Open Footer</span>
<footer>
</footer>

これが私のCSS

footer {
  position: absolute;
  display: none;
  left: 0;
  bottom: 0;
  width: 100%;
  height: 20%;
  background: rgba(0, 0, 0, 0.69);
}

.fTab {
  width: 15%;
  height: 4em;
  position: absolute;
  bottom: 0;
  left: 2em;
  display: block;
  background: rgba(0, 0, 0, 0.69);
  color: #c1c1c1;
  line-height: 4em;
  text-align: center;
  font-size: 1.2em;
  border-radius: 10px 10px 0 0;
  cursor: pointer;
  -webkit-transition: 0.5s ease-in-out;
  -moz-transition: 0.5s ease-in-out;
  -ms-transition: 0.5s ease-in-out;
  -o-transition: 0.5s ease-in-out;
}

.fTab.current {
  bottom: 20%;
}

これが私のjQuery

function footer() {
  var footerH = $('footer');
  var fH = footerH.height();

  $('.fTab').on('click', function() {
      $(this).toggleClass('current');
      $('footer').slideToggle(500);
  });
}

footer();

これがJSFIDDLEで、ここに私が試していた別のオプション、JSFIDDLE 2があります

LIVE SITEが必要な場合は、こちらをご覧ください。

他に何か必要な場合はお知らせください。すべての助けに感謝します。

4

1 に答える 1

8

私はあなたのために必要最小限のフィドルを作成しました。

秘訣はbottom、ボタンの値とheightフッターの値の両方を移行することです。ボタンの位置とフッターの高さの両方に CSS3 トランジションを使用できるため、jQuery でスライドする必要はありません。

ただし、jQuery を使用してボタンのテキストを「フッターを非表示」に切り替えることもできます。

于 2013-11-07T17:32:30.217 に答える