首页
学习
活动
专区
圈层
工具
发布
首页
学习
活动
专区
圈层
工具
社区首页 >问答首页 >带滑下的JQuery动画

带滑下的JQuery动画
EN

Stack Overflow用户
提问于 2014-03-08 15:49:50
回答 1查看 10.5K关注 0票数 1

我的顶部导航有一个动画。虽然向下滚动效果良好,但动画带有淡入淡出效果。我想要的是背景的滑动效果。因为滚动不会触发向下滑动,所以不能让它像向下滑动一样工作。有谁可以帮我?

这是我的网站:

http://goo.gl/8xt1XZ

下面是我的代码:

代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
$(function() {
var floating_navigation_offset_top = $('#floating-nav').offset().top;
$(window).scroll(function(){
    var scrollTop = $(window).scrollTop();
    if(scrollTop > floating_navigation_offset_top)
        $('#floating-nav').stop().animate({'opacity':'1'},800).css({'position':'fixed','top': '0', 'z-index': '99'});
    else   
        $('#floating-nav').stop().animate({'opacity':'0'},40);
});

});
EN

回答 1

Stack Overflow用户

回答已采纳

发布于 2014-03-08 16:28:30

据我所知,如果你想要一个向下滑动的效果,而不是动画opacity,简单地动画height从0到你的向下滑动菜单的高度。

更新:

更好的是,根据Alexander Lozada的评论,您可以使用.slideDown()函数。

代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
$(selector).slideDown(speed,callback);

进一步更新:应请求,这里是一个简单的fiddle

注意:为了让slideDown工作,元素应该被JQ方法隐藏,比如slideUp(),或者css display:none

票数 4
EN
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接:

https://stackoverflow.com/questions/22271471

复制
相关文章
jQuery 编程 | jQuery 动画
jQuery提供了一些列的动画基本方法,同时也提供了自定动画方案.animate()。
闻说社
2022/08/10
6.1K0
jQuery 动画
jQuery动画相关方法概况 方法 说明 实例 hide()和show() 隐藏和显示 HTML 元素。 $("#hide").click(function(){    
静默虚空
2018/01/05
2.8K0
JavaScript 动画_jquery 动画
回调函数原理:函数可以作为一个参数。将这个函数作为参数传到另一个函数里面,当那个函数执行完之后,再执行传进去的这个函数,这个过程叫做回调。
全栈程序员站长
2022/11/04
2.4K0
JQuery中的动画
  这两种方法是jQuery动画的最基本方法。当为元素调用show方法时相当于将该元素的display样式改为block或者inline,同理,如果当元素调用hide方法时,相当于将该元素的样式改为none;因此:$("element").hide()等同于$("element").css("display","none");
小小许
2018/09/20
2.6K0
jquery的事件&动画
在1.7之前的版本中jQuery处理事件有多个方法, (google 搜索: jquery live bind degelate)作用各不相同,后来统一的使用on/off方法
bamboo
2019/01/29
1.8K0
jquery的事件&动画
jQuery动画,案例
1.显示动画 show([s,[e],[fn]]) 内部实现原理根据当前操作的元素是块级还是行内决定, 块级内部调用display:block;,行内内部调用display:inline;
不愿意做鱼的小鲸鱼
2022/08/24
5K0
jQuery动画,案例
jquery animate 动画
点击动画的按钮,div的宽高就会放大。这次的放大是同时实现了width和height的变化。
Devops海洋的渔夫
2019/05/30
2.3K0
jQuery中的简单动画
该文介绍了jQuery中的简单动画,包括hide(time)、show(time)、fadeln()、fadeOut()、slideDown(time)、slideUp(time)、toggle()、slideToggle()、fadeToggle()、fadeTo(speed,opacity,[fn])、animate(params,[speed],[easing],[fn])、stop(clearQueue,jumpToEnd)、delay(duration,[queueName])等方法和参数,以及自定义动画和延迟动画的方法和参数。
IMWeb前端团队
2018/01/08
1.6K0
js动画效果大全_jquery 动画
在一些动画设置中,我们可以用CSS中已有的动画属性方便的设置动画效果,比如说animation动画,transition过渡,它们结合一些2D,3D变换可以达到可观的动画效果,但是涉及到更多更加复杂的动画这个时候我们还要基于JavaScript实现。在这里我们定义一个JavaScript中一个实用的函数以便今后的设置。
全栈程序员站长
2022/09/27
12.2K0
jQuery中的简单动画
hide(time)将元素的display变为none,可以设置时间,让其缓慢的变化
IMWeb前端团队
2019/12/03
1.1K0
Android 带伸缩动画的布局
OK,下面主要看实现步骤,你随便新建一个Activity就可以了,然后把需要的的一些样式准备好,
晨曦_LLW
2020/09/25
1.7K0
jQuery动画与ajax
1: jQuery $(document).ready()与window.onload的区别? Jquery中$(document).ready()的作用类似于传统JavaScript中的window.onload方法,不过与window.onload方法还是有区别的。 1.执行时间 window.onload必须等到页面内包括图片的所有元素加载完毕后才能执行。 $(document).ready()是DOM结构绘制完毕后就执行,不必等到加载完毕 . 2.编写个数不同 window.onload不能同时编
小胖
2018/06/27
2.8K0
jQuery基础--动画操作
三组基本动画 <!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="UTF-8"> <title>Title</title>
eadela
2019/09/29
4.1K0
jQuery基础--动画操作
jquery 事件和动画
blur focus load resize scroll unload click dbclick mousedown mouseup mousemove mouseover mouseout mouseenter mouseleave change select submit keydown keypress keyup error
用户5760343
2019/10/08
2.1K0
jquery 事件和动画
jQuery里面的动画
finish 等价 stop(true,true),当前动画停止 ,不清除队列 ,直接队列完成
IT工作者
2022/04/27
1.4K0
锋利的JQuery —— 事件和动画
大图猛戳
用户1154259
2018/01/17
6460
锋利的JQuery —— 事件和动画
jquery动画效果实例_动画js
版权声明:本文内容由互联网用户自发贡献,该文观点仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 举报,一经查实,本站将立刻删除。
全栈程序员站长
2022/11/03
8.9K0
jquery动画效果实例_动画js
jQuery(事件和动画-事件绑定移除、动画)
①params:一组包含作为动画属性和终值的样式属性和及其值的集合(动画的目标样式);
全栈开发日记
2022/05/12
2.3K0
jQuery里面的动画队列
queueName 字符串值,包含序列的名称。默认是 fx, 标准的效果序列
IT工作者
2022/04/27
7050
前端基础-jQuery动画效果
第9章 jQuery动画效果 jQuery提供了三组基本动画,这些动画都是标准的、有规律的效果,jQuery还提供了自定义动画的功能。 演示动画效果 [08-演示jQuery动画(animate).html] 9.1 三组基本动画 显示(show)与隐藏(hide)与切换(toggle)是一组动画: 滑入(slideUp)与滑出(slideDown)与切换(slideToggle),效果与卷帘门类似 淡入(fadeIn)与淡出(fadeOut)与切换(fadeToggle) $obj.show([spee
cwl_java
2020/03/26
3K0

相似问题

要滑下的UIView动画

21

滑下Android (没有动画)

11

Jquery问题滑下

21

滑下动画以显示错误

23

Android上滑和滑下动画

10
添加站长 进交流群

领取专属 10元无门槛券

AI混元助手 在线答疑

扫码加入开发者社群
关注 腾讯云开发者公众号

洞察 腾讯核心技术

剖析业界实践案例

扫码关注腾讯云开发者公众号
领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档
查看详情【社区公告】 技术创作特训营有奖征文