如何顯示或隱藏格的基礎上，另一格

Question

的位置，我有以下的jQuery水平滑動一個div：

$('.nextcol').click(function() { 
    $('.innerslide').animate({'left': '-=711px'}, 1000); 
}); 

$('.prevcol').click(function() { 
    $('.innerslide').animate({'left': '+=711px'}, 1000); 
}); 

我希望發生的就是這個...如果股利。 innerslide的立場是left：0px然後我想隱藏div.backarrow。如果位置不是left：0px，則顯示它。

任何幫助將不勝感激。

編輯（添加HTML標記）

<div class="backarrow prevcol"> 

<div id="mainleft" class="overflowhidden"> 
     <div class="innerslide"> 
      <div class="col">my content including <a href="#" class="nextcol">next</a></div> 
      <div class="col">my content including <a href="#" class="nextcol">next</a></div> 
      <div class="col">my content including <a href="#" class="nextcol">next</a></div> 
     </div> 
</div> 

Answer 1

試試這個：

if ($('.innerslide').css("left") == 0) { 
    $('div.backarrow').hide(); 
} else { 
    $('div.backarrow').show(); 
} 

修復了雙擊問題： 從你的描述你的關於訪問者雙重問題時的問題的評論ks，這聽起來像雙擊是導致兩個動畫事件觸發。爲了防止這種情況發生，您可以在動畫運行時禁用點擊處理程序，並在完成後重新啓用它，或者可以嘗試編寫新線程以不斷檢查元素的位置。其中一個解決方案不是一個好主意 - 我會讓你弄清楚哪一個:) - 但另一個實際上有一個非常簡單的解決方案，它只需要對現有代碼進行很少的更改（並且實際上可以通過少量weeny來減少開銷量）：

$('.nextcol').on("click.next", function() { 
    $('.innerslide').animate({'left': '-=711px'}, 1000, showHideBack()); 
    $(this).off("click.next"); 
}); 

$('.prevcol').on("click.prev", function() { 
    $('.innerslide').animate({'left': '+=711px'}, 1000, showHideForward()); 
    $(this).off("click.prev"); 
}); 

那麼這此行添加到showHideBack()（和互補的一個showHideForward()，如果你正在使用）：

$('.nextcol').on("click.next"..... 

我建議你寫一個函數來設置每次點擊處理程序另一個去除每一個。這將使你的生活變得非常簡單，整個解決方案應該通過在動畫運行時刪除不必要的點擊處理程序來降低開銷。

注意：animation方法通常在動畫完成之前調用其回調函數。因此，在調用showHide...方法之前，您可能希望使用delay。

讓我知道如果您有任何問題。祝你好運！ :)

UPDATE：

這裏是你給了我熨平了所有的bug小提琴的updated version。看起來我錯誤地理解了我原來的解決方案中的一部分目標，但我在這裏理清了它。我也包括更新的jQuery的，在這裏：

var speed = 1000; 
var back = $("div.backarrow"); 
var next = $(".nextcol"); 
var prev = $(".prevcol"); 
var inner = $(".innerslide"); 

function clickNext(index) { 
    next.off("click.next"); 
    inner.animate({ 
     'left': '-=711px' 
    }, speed, function() { 
     back.show(); //this line will only be hit if there is a previous column to show 
      next.delay(speed).on("click.next", function() { 
       clickNext(); 
      }); 
    }); 
} 

function clickPrev() { 
    prev.off("click.prev"); 
    inner.animate({ 
     'left': '+=711px' 
    }, speed, function() { 
     if (inner.css("left") == "0px") { 
      back.delay(speed).hide(); 
      prev.delay(speed).on("click.prev", function() { 
       clickPrev(); 
      }); 
     } else { 
      back.delay(speed).show(); 
      prev.delay(speed).on("click.prev", function() { 
       clickPrev(); 
      }); 
     } 
    }); 
} 

next.on("click.next", function() { 
    clickNext(); 
}); 

prev.on("click.prev", function() { 
    clickPrev(); 
});​ 

我會還包括一個條件來檢查，如果你正在查看的最後一列，但是，因爲我不知道你是什麼最終的實施將是，我不知道它是否適用。一如既往，讓我知道你是否需要幫助或澄清任何這些。 :)

Answer 2

你可以嘗試step選項 - 這是在動畫的每一步解僱一個回調函數：本文中使用的

$('.prevcol').click(function() { 
    $('.innerslide').animate({ left: '+=711px' }, 
      { 
       duration: 1000, 
       step: function(now, fx) { 
         if (now === 0) { 
          $('div.backarrow').hide(); 
         } else { 
          $('div.backarrow').show(); 
         } 
       } 
    }); 
}); 

更多的例子The jQuery animate() step callback function