可見性隱藏閃爍多次後淡入

我試圖讓一些文本淡入之後，一些圖像移動一旦你到達頁面上的某個點。如果我已經下了頁面並刷新，它會正常工作，但是當我從頂部滾動到該區域時，它會執行正確的動畫，但是文本會一遍又一遍地閃爍。有什麼辦法可以阻止它嗎？可見性隱藏閃爍多次後淡入

這裏是JavaScript

$(document).ready(function(){ 
      $(window).scroll(function(){ 
       if ($(this).scrollTop() > 1350) { 
       $('#managecontent1').animate({bottom: '0px'},900); 
       $('#managecontent2').animate({bottom: '0px'},900,function(){ 
         $('#twocolumntextcontainer').css("visibility","visible").hide().fadeIn('slow'); 
        }); 
      } 
       }); 
     });

這裏是HTML

<div id="twocolumntextcontainer"> 
     <div id="twocolumntextleft"> 
      <p>C.M.S. <span>Wordpress</span></p> 
     </div> 
     <div id="twocolumntextright"> 
      <p>F.T.P. <span>FileZilla</span></p> 
     </div> 
    </div> 
    <div class="twocolumnlayout"> 
     <div id="managecontent1"> 
      <img src="img/wordpresslogo_203x203.png" /> 
     </div> 
     <div id="managecontent2"> 
      <img src="img/filezillaicon_210x208.png" /> 
     </div> 
    </div>

來源

2013-03-08 zachstarnes

可以請你添加HTML部分嗎？可能是一個jsfiddle？ – arjuncc 2013-03-08 04:52:51

您已設置，將導致這個條件。

如果您看一下，您每次窗口滾動並且scrollTop值大於1350px時都會觸發動畫。如果您繼續在這一點之外滾動，動畫將不斷觸發。

當條件滿足時（假設您不希望動畫在頁面刷新之前再次發生），您可能會想要解除綁定eventListener。

你的if語句中添加此：

$(this).unbind('scroll');

將從窗口一旦你的條件得到滿足，一旦完全取消綁定滾動監聽器。

來源

2013-03-08 04:55:54 djreed

我試着使scrollTop == 1350，並沒有發生任何事情。即使當我滾動到或經過那個點時。 – zachstarnes 2013-03-08 05:02:10

由於某種原因它不會識別== 1350 – zachstarnes 2013-03-08 05:14:04

剛剛更新了我的答案，以包含更好的解決方案。去看看，看看是否達到你要找的東西。 – djreed 2013-03-08 05:21:48

你可以嘗試以下

$(document).ready(function() { 
      $(window).scroll(function() { 
       $('#twocolumntextcontainer').fadeOut("slow"); 
       if ($(this).scrollTop() > 1350) { 
        $('#managecontent1').animate({ bottom: '0px' }, 900); 
        $('#managecontent2').animate({ bottom: '0px' }, 900, function() { 
         $('#twocolumntextcontainer').fadeIn('slow'); 
        }); 
       } 
      }); 
     });

來源

2013-03-08 04:56:05 Shahdat

我試過了，我不能在文本上使用淡入淡出效果，因爲當圖像從底部滑入時，它們會經過這個點然後猛拉回來。我需要該div在那裏只是不可見。 – zachstarnes 2013-03-08 05:17:24

可見性隱藏閃爍多次後淡入

回答

相關問題