2014-09-04 92 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工作