HTML5jQuery.animate()({scrollTop:});没有按预期工作
HTML5 jQuery .animate()({scrollTop: }); not working as intended
我正在使用XDK编写我的第一个基于HTML5的应用程序。我已经成功地将它连接到一个简单的基于本地.vb的web服务,用于模拟用户登录验证。成功登录后,我希望将一个新的div加载到视图中,以便我在应用程序中的导航在外观上保持一致。
从主页执行的导航工作如下:
<ul class="list widget uib_w_3 d-margins" data-uib="app_framework/listview">
<li class="widget uib_w_4" data-uib="app_framework/listitem">
<a class="icon user" href="#login_page">Login
</a>
</li>
<li class="widget uib_w_5" data-uib="app_framework/listitem">
<a class="icon pencil" href="#register_page">Register
</a>
</li>
<li class="widget uib_w_6" data-uib="app_framework/listitem">
<a class="icon settings" href="#settings_page">Settings
</a>
</li>
<li class="widget uib_w_7" data-uib="app_framework/listitem">
<a class="icon paper" href="#acc_management_page">Acc Managment
</a>
</li>
</ul><span class="uib_shim"></span>
上面的一切都很好,正如预期的那样。单击/触摸登录按钮后,您将进入login_page
,并且您有一个username
和password
的输入字段。登录由jQuery脚本处理,该脚本通过vb.net web服务验证信息。登录验证工作正常。当用户输入他们的username
和password
时,他们单击登录按钮,onClick事件调用jQuery脚本,如下所示:
function verifyInfo(){
var uName=document.getElementById("l_username").value;
var pWord=document.getElementById("l_password").value;
$.ajax(
{
type: 'POST',
url: 'http://localhost/TestWebService/Verify.asmx/UserVerify',
data: "{ '"username'":'""+uName+"'",'"password'":'""+pWord+"'"}",
contentType: 'application/json; charset=utf-8',
dataType: 'json',
success: function(data) {
if(data.d == "true"){
alert("Correct Login Credintials");
}
else{
alert("Incorrect Login Credintials");
}
alert(data.d);},
error: function(data){alert('Failed on :'+data.d);}
});
}
为了实现我想要的功能,我在这个脚本中添加了以下部分:
function verifyInfo(){
var uName=document.getElementById("l_username").value;
var pWord=document.getElementById("l_password").value;
$.ajax(
{
type: 'POST',
url: 'http://localhost/TestWebService/Verify.asmx/UserVerify',
data: "{ '"username'":'""+uName+"'",'"password'":'""+pWord+"'"}",
contentType: 'application/json; charset=utf-8',
dataType: 'json',
success: function(data) {
if(data.d = "true"){
alert("Correct Login Credintials");
//Added functionality
$('html,body').animate({
scrollTop: $("#acc_management_page").offset().top
});
//End of added functionality
}
else{
alert("Incorrect Login Credintials");
}
alert(data.d);},
error: function(data){alert('Failed on :'+data.d);}
});
}
如果我理解正确的话,这应该会触发动画调用来导航到适当的div,在我们的例子中是acc_management_page
。这种导航方法在我的导航菜单中运行良好,但在脚本中不起作用。登录已验证,所有警报都按预期触发,但acc_management_page从未滚动到。如有任何建议和/或解决方案,我们将不胜感激。
谢谢!
是否尝试将"id"属性添加到锚标记中。jQuery正在查找id而不是href。
看看这个演示
工作起来很有魅力:(
$('.uib_w_4').click(function () {
alert('Now I will ask you if your login is ok ! to simulate Login Form');
if (confirm('Login with success !?')) {
letsAnimate();
} else {
// Do nothing!
alert('Login Failed');
};
});
function letsAnimate() {
$('html,body').animate({
scrollTop: $("#acc_management_page").offset().top
});
};
还要检查您的CSS文件,如果内容div设置不正确(高度、位置固定/相对等(,可能会产生一些意外行为。
看看这个演示
我也遇到了同样的问题,但最终我找到了负责滚动的div类,并使用css成功地滚动了它(我发现XDK滚动是以同样的方式实现的-我只是将其重置为未收集的params值(:
$('.afScrollPanel').css('transform', 'matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1)');
- JQuery.animate();不以固定高度工作
- jquery animate无法正常工作
- jQuery animate只在单击时工作一次
- JavaScript选项卡动态宽度.animate()只能工作一次
- 第一个jQuery.animate()不工作
- jQuery+Animate.css动画只工作一次,动画不会重置
- jQuery animate complete无法工作
- jQuery .animate() 无法正常工作
- ui-router 如何与 ng-animate 一起工作
- 为什么我需要使用“setTimeout()”来使“jquery.animate”在主干视图中工作
- animate() 不连续工作
- ng-show 无法在 ng-animate 中正常工作
- 无法让 jQuery animate 切换开关工作
- jQuery animate()不工作.为什么?
- jQuery animate无法在输入事件侦听器中工作
- JQuery背景颜色更改(.animate或.css)在重新启动后只能工作一次
- JQuery animate()没有'我不在FF或Opera工作
- Javascript animate()滚动无法按预期工作
- Ng animate没有在AngularJS中工作
- jquery animate scrollTop函数在internet explorer中不工作