導航（jQuery）上的淡入淡出和滑動效果

我試圖創建一個「回到頂部」鏈接，該鏈接淡入並從左側滑入，當用戶滾動經過某個點並淡入淡出並在滾動後滑出超過同一點。導航（jQuery）上的淡入淡出和滑動效果

HTML：

<section id="banner"></section> 
<nav id="fixed"> 
    <ul> 
     <li id="top-link"><a href="#">Top</a></li> 
     <li><a href="#">Nav 1</a></li> 
     <li><a href="#">Nav 2</a></li> 
     <li><a href="#">Nav 3</a></li> 
     <li><a href="#">Nav 4</a></li> 
    </ul> 
</nav> 
<section id="content"></section>

的Javascript：

$(document).ready(function(){ 
    $("#top-link").hide(); 
}); 

$(function() { 
    $(window).scroll(function() { 
     if($(this).scrollTop() >= 300) { 
      $('#top-link').fadeIn(); 
     } else { 
      $('#top-link').fadeOut(); 
     } 
    }); 
});

我能夠得到它的淡入和淡出的時候你滾過300像素，但是你可以看到從這個例子http://jsfiddle.net/AFMxe/10/當它淡入淡出時，隨後的li項目「彈出」到右側。有沒有一種方法可以在淡入淡出的同時平滑地進行動畫播放？

來源

2013-07-09 Kevin Haag

如何http://jsfiddle.net/AFMxe/11/的visibility財產？一切我所做的就是將CSS的幾行：

#top-link { 
position: absolute; 
margin-left: 50px; 
}

編輯：

新版本在這裏：http://jsfiddle.net/AFMxe/13/

我加了班「無頂鏈接」爲每個其他列表項目（當然可以做得更好），並將jQuery淡化功能更改爲：

$(function() { 
    $(window).scroll(function() { 
     if($(this).scrollTop() >= 300) { 
      $('#top-link').fadeIn(); 
      $('.no-top-link').animate({ marginRight: "12px" }, 1000) 
      // 1000 describes the time (in ms) the animation takes, change it as desired 
     } else { 
      $('#top-link').fadeOut(); 
     } 
    }); 
});

編輯2： 即下面的函數，應適當

$(function() { 
    $(window).scroll(function() { 
     if($(this).scrollTop() >= 300) { 
      $('#top-link').fadeIn(); 
      $('.no-top-link').animate({'marginRight': '12px'},{duration: 1000, queue: false}); 
     } else { 
      $('#top-link').fadeOut(); 
      $('.no-top-link').animate({'marginRight': '20px'},{duration: 1000, queue: false}); 
     } 


    });

問題的解決方案：我忘了添加 '排隊'。

說明：

隊列（默認值：真）類型：Boolean或String一個布爾值指示是否放置動畫效果隊列。如果爲false，則動畫將立即開始。從jQuery 1.7開始，隊列選項也可以接受一個字符串，在這種情況下，將動畫添加到由該字符串表示的隊列中。當使用自定義隊列名稱時，動畫不會自動啓動;您必須致電 .dequeue（「queuename」）啓動它。（來源：）

成品jsFiddle

來源

2013-07-09 23:03:45

這解決了跳過的問題，但導航沒有居中在它的容器這種方式。我試圖讓頂部鏈接後的li項目在視覺上向右滑動，因爲它會淡入。 –

@KevinHaag：請參閱我的編輯。我玩弄了像素值。你必須調整他們到你的具體頁面設計。那是你需要的嗎？ –

真的很接近，但是當你滑過備份導航時，它需要向後滑動。 –

使用animate方法，而不是嘗試..

//FADE IN BACK TO TOP LINK 

$(document).ready(function(){ 
    $("#top-link").css('opacity', '0'); 
}); 

$(function() { 
    $(window).scroll(function() { 
     if($(this).scrollTop() >= 300) { 
      $('#top-link').animate({ 
       opacity : 1 
      },400); 
     } else { 
      $('#top-link').animate({ 
       opacity : 0 
      },400); 
     } 
    }); 
});

Check Fiddle

否則，你可以隨時使用，而不是display財產

來源

2013-07-09 23:02:50

這一項的小提琴有點出問題 - 列表項不會在其容器中心和頂部鏈接並不總是顯示。我認爲這是因爲當不透明度設置爲0時，元素實際上仍然在DOM中，所以它會將後續列表項目推過來。（糾正我，如果我錯了） –

正確..元素不居中，因爲元素總是存在.. –

導航（jQuery）上的淡入淡出和滑動效果

回答

相關問題