2014-09-04 95 views
3

這是HTML之一:jQuery的顯示效果不起作用

<section class="navbar-sticky-btn-body" id="back-top"> 
    <a> 
     <img src="../Images/Shared/BackToTop.png" /> 
    </a> 
</section> 

和jQuery是這樣的:

$(document).ready(function() { 
    // hide #back-top first 
    $("#back-top").hide(); 
    // fade in #back-top 
    $(function() { 
     $(window).scroll(function() { 
      if ($(this).scrollTop() > 50) { 
       $('#back-top').show("fold", null, 500); 
      } else { 
       $('#back-top').hide("fold", null, 500); 
      } 
     }); 
     // scroll body to 0px on click 
     $('#back-top a').click(function() { 
      $('body,html').animate({ 
       scrollTop: 0 
      }, 800); 
      return false; 
     }); 
    }); 

}); 

當你看到我使用的摺疊效果被應用到顯示功能但是我使用的每一個效果都能看到相同的結果!

我應該犯一個愚蠢的錯誤,但不幸的是我無法修復它!

+0

您是否包含特效插件? – dfsq 2014-09-04 06:04:24

+0

你有包含jQuery UI嗎?如果不是,請從http://jqueryui.com/包括它 – 2014-09-04 06:06:37

+0

不!那是什麼?我只是用這裏的東西「http://jqueryui.com/show/」! – ConductedClever 2014-09-04 06:07:06

回答

2

下載jQuery用戶界面的另一個版本,其中包括來自jqueryui.com/download「效果」功能(檢查它爲真)。

0

在那段代碼中,當你向下滾動時你想顯示一些東西,對吧?但是,如果它位於頁面頂部,則不會看到它。如果是這樣的話,你應該這樣添加somethig的CSS:

#back-top{ 
    position:fixed; 
    top:0px; 
} 

而且,它會使每一次的動畫,所以你要檢查,如果該元素是隱藏或不使動畫:

if ($(this).scrollTop() > 50) { 
    if($('#back-top').css("display")=="none"){ 
     $('#back-top').show("fold", null, 500); 
    } 
} else { 
    $('#back-top').hide("fold", null, 500); 
} 

並且一定要添加jQuery和jQuery UI。

這裏是一個Demo工作