jQuery在視差動畫中淡入和淡出div

Question

我有一個主頁，其中僅顯示一些徽標和etxt，單擊它的div滾動到另一頁。

現在，我已經完成了滾動的動畫部分。 我需要的是，當有人單擊“查找您的心臟”時，導航div必須作為淡入淡出。 我嘗試使用window方法並采取滾動位置，但是沒有任何效果。

Answer 1

檢查此： http : //imakewebthings.com/jquery-waypoints/它可以幫助您.. :)

Answer 2

如果要滾動到navigation-div，請使用以下代碼：

$("#findYourHeartDiv").click(function() {
  $('html, body').animate({
    scrollTop: ($("#navDiv").offset().top)
  }, 800);
});

如果要淡入，請先將其隱藏（例如，使用css display:none; ），然后使用以下代碼：

$("#findYourHeartDiv").click(function() {
  $("#navDiv").fadeIn(); 
});

您可以結合使用兩者來滾動至它並使其淡入：

$("#findYourHeartDiv").click(function() {
    $('html, body').animate({
      scrollTop: ($("#navDiv").offset().top)
    }, 
    500,
    function() {
      //animation complete function
      $("#navDiv").slideDown();
    });
});

要在用戶滾動到某個位置時淡入：

$(window).bind("scroll", function () {
  var wintop = $(window).scrollTop(); // the scroll position
  if(wintop>$("#navDiv").offset().top) {
    $("#navDiv").fadeIn();
  }
  else {
    $("#navDiv").fadeOut();
  }
});