- android - 多次调用 OnPrimaryClipChangedListener
- android - 无法更新 RecyclerView 中的 TextView 字段
- android.database.CursorIndexOutOfBoundsException : Index 0 requested, 光标大小为 0
- android - 使用 AppCompat 时,我们是否需要明确指定其 UI 组件(Spinner、EditText)颜色
Logo 元素的内边距将为 padding: 9px 0;负载。当用户开始向下滚动页面时,我使用 animation() 将填充设置为 0px,当用户返回页面顶部时,在 jquery 中使用 animation() 再次将填充设置为 9px 0。现在的问题是当用户滚动到页面顶部时仅在几秒钟后才开始播放动画。我需要它立即发生。
http://testing.coreintegrator.com/这是它的演示
$(window).scroll(function (event) {
var scroll = $(window).scrollTop();
if(scroll != 0){
$('.logo').animate({padding: "0px 0px"});
} else
{
$('.logo').animate({padding: "9px 0px"});
}
});
最佳答案
发生这种情况是因为,当您滚动页面时,animate
函数会被重复调用。因此,在滚动页面时使用 animate
函数不是一个好主意。
但是,您可以使用变量来避免重复调用 animate
函数。请参见下面的示例:
$( document ).ready( function() {
var scrolled = false;
$( window ).scroll( function () {
var scroll = $( window ).scrollTop();
if ( scroll != 0 && !scrolled ){
scrolled = true;
$( '.logo' ).animate( {margin: '0'}, 'fast' );
} else if ( scroll == 0 && scrolled ) {
scrolled = false;
$( '.logo' ).animate( {margin: '9px 0'}, 'fast' );
}
})
})
body {
margin: 0;
padding-bottom: 100%
}
.logo {
display: block;
position: fixed;
margin-top: 9px;
width: 300px;
height: 100px;
background: #eee url('https://cdn1.imggmi.com/uploads/2019/2/14/01eb69be0f0914245ef9a681d6d05172-full.png') no-repeat;
-webkit-background-size: 100% auto;
-moz-background-size: 100% auto;
-ms-background-size: 100% auto;
-o-background-size: 100% auto;
background-size: 100% auto
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<a href='http://testing.coreintegrator.com/' class='logo'></a>
但更好的方法是,您可以使用 CSS transition
来实现。请参见下面的示例:
$( document ).ready( function() {
$( window ).scroll( function () {
var scroll = $( window ).scrollTop();
if( scroll != 0 ){
$( '.logo' ).addClass( 'scroll' )
} else {
$( '.logo' ).removeClass( 'scroll' )
}
})
})
body {
margin: 0;
padding-bottom: 100%
}
.logo {
display: block;
position: fixed;
margin-top: 9px;
width: 300px;
height: 100px;
background: #eee url('https://cdn1.imggmi.com/uploads/2019/2/14/01eb69be0f0914245ef9a681d6d05172-full.png') no-repeat;
-webkit-background-size: 100% auto;
-moz-background-size: 100% auto;
-ms-background-size: 100% auto;
-o-background-size: 100% auto;
background-size: 100% auto;
-webkit-transition: all 100ms ease-out;
-moz-transition: all 100ms ease-out;
-o-transition: all 100ms ease-out;
transition: all 100ms ease-out
}
.scroll {
width: 150px;
height: 50px;
margin-top: 0
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<a href='http://testing.coreintegrator.com/' class='logo'></a>
注意:stop()
方法会破坏之前的所有动画,并且不会阻止滚动页面时“动画”函数的重复出现。
关于javascript - 几秒钟后 Jquery animation() 响应非常缓慢,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/54685342/
我最近从 Indigo“升级”到了 Luna(Oracle OEPE 安装)。请注意围绕“升级”一词的引用。 不幸的是,事情很慢。 我使用的项目是一个 Maven 多模块项目。构建工作区操作大约需要
如果我的 JavaScript 事件似乎都不是网页性能问题的原因,我该如何诊断网页性能问题? 我有一个使用jqGrid的网络应用程序。单击网格会导致 2-3 秒的卡住,然后发生任何事情(包括点击任何单
从 appengine 访问我的应用程序时,我经常收到以下错误。有人可以知道这是什么原因吗? 原因:com.google.apphosting.api.DeadlineExceededExceptio
出于某种原因,我的 curl 调用非常慢。这是我使用的代码。 $postData = "test" $ch = curl_init(); curl_setopt($ch, CURLOPT_URL, $
Stackdriver 测试我的网站启动速度慢 我们使用 cloudflare 作为我们的站点 CDN 提供商。我们使用 stackdriver 从外部测试站点可用性,我们将时间检查间隔设置为 1 分
在插入/更新许多行时,我知道SQLite的“问题”,但事实并非如此。 我正在更新包含约250条记录的表中的ONE一行(由PK索引)中的ONE字段。查询通常需要200毫秒左右的时间。听起来很少,但很大。
我们的 Mongo 数据库会定期(有时每天一次)变慢约 30-40 分钟。在此缓慢时期,访问数据库的 API 会遇到每 5-10 分钟就会出现一次的高延迟峰值。 查看 mongod 日志文件,这两
这个问题已经在这里有了答案: 已关闭8年。 Possible Duplicate: C# WinForm Application - UI Hangs during Long-Running Oper
我最近将我的 Java Liquibase 版本从 3.5.3 升级到 3.6.3 我有一个非常繁重的环境,其中有很多数据库和表(我使用的是 Oracle)。 在这种环境下,我试图执行一个巨大的变更日
在我的项目中,为了整洁起见,模块被组织在子目录中。 我的项目目录层次结构: $ ls -R .: configure.in Makefile.am Makefile.cvs src
我正在 Debian 上使用存储库中的软件包运行 Gitlab。大多数时候Gitlab运行速度非常快,但是在较长的空闲时间后Gitlab非常慢甚至超时(错误502)。有一次我在远程 git 访问上也遇
这可能是菜鸟的错误,所以请原谅我。我在高处和低处寻找解决方案,但没有结果-因此,我想在此添加第一篇文章:-) 我有两个域类,一个称为Domain,一个称为Page。如下代码所示,域中有许多页面。 cl
我是 React 的新手,在使用 onChange 时遇到了问题在大数据列表中生成的输入字段上的方法。 如 parentcomponent是数据的拥有者,我提供了handleUpdate()子组件 (
我们使用 Webpack DefinePlugin 为不同的渲染模式生成输出包。因此,例如,我们的 webpack 配置将返回 [{ entry: { mode1: "./in
我在页面顶部有一个带有菜单的标题元素。当我向下滚动时,标题会动画到较低的高度。当我向上滚动并到达顶部时,标题会以动画方式显示为原始大小。 但它的工作并不完美。有时,事情发生之前需要两秒钟。特别是当我向
我今天在我的文本编辑器(Sublime)中写了一些正则表达式,试图快速找到特定的源代码段,这需要有点创意,因为有时函数调用可能包含更多函数调用。例如,我正在寻找 jQuery 选择器: $("div[
ParentSadly 我没有通过搜索“laggy/slow mouse wheel-scrolling in Rich Edit control”和类似的句子找到答案。 我创建了一个丰富的编辑控件
我遇到了“OR”运算符在 mysql 中未使用任何索引的典型性能问题: SELECT sms.smsID, sms.phonenumber, sms.text, date, mbr.name, mbr
我最近一直在玩 asyncio 模块。下面是我想出的用于发送一些并行请求的代码,这些请求在我的笔记本电脑 (Mac OS) 上似乎运行良好,但在另一台机器 (Ubuntu 18.04) 上似乎运行缓慢
我目前正在开发一个并行应用程序(C#、WinForms),它通过 COM 将消息注入(inject)应用程序。 此应用程序使用多个 foreach 语句,从接受 COM 的应用程序中轮询实体指标。 L
我是一名优秀的程序员,十分优秀!