0

まともに考えられない日々を過ごしています。

基本的にはdivを画面外に配置し、クリックすると左からスライドインします（正常に機能します）。もう一度クリックするとスライドアウトする必要があります。

CSS

タブレット フライアウトはローテーター内に絶対配置されるため、display: none を使用してローテーター オーバーレイを非表示にしたり、切り替えたりすることはできません。

HTML

<div class="rotator-overlay">
 <div class="tablet-flyout">+</div>
</div>

jQuery

  $('.tablet-flyout').click(function () {
          $('.rotator-overlay').animate({ left: '0' }, 500);
     })

以前に使用したことslideToggleがありますが、表示ブロック/表示なしを切り替えるときにのみ成功しました。

4

2 に答える 2

3

div の状態を変数に保存してから、クリック関数内で確認する必要があります。したがって、div が画面外にある場合はスライドインし、そうでない場合はスライドアウトします。

そのために変数を使用したくない場合は、いつでも確認して$('.rotator-overlay').css('left')、取得した値に基づいて適切なアクションを実行できます。

このようなもの (私は -200 を例に取りました):

$('.travel-search-tablet-flyout').click(function () {
    if ($('.rotator-overlay').css('left') == 0)
        $('.rotator-overlay').animate({ left: '-200' }, 500);
    else
        $('.rotator-overlay').animate({ left: '0' }, 500);
})
于 2013-10-17T16:51:00.927 に答える
0

スライドさせようとしている要素の左側を確認し、if ステートメントを使用して前後に切り替えます。

 $('.travel-search-tablet-flyout').click(function () {
   if ($('.rotator-overlay').css('left') == 0) {
     // Slide the other way here, opposite
     // $('.rotator-overlay').animate({ left: '????' }, 500);
   } else {
     // Your original animate
     $('.rotator-overlay').animate({ left: '0' }, 500);
   }
 })
于 2013-10-17T16:52:33.697 に答える