热门标签 | HotTags
当前位置:  开发笔记 > 编程语言 > 正文

高度修复的jQueryUI幻灯片动画仅适用于第一次-jQueryUIslideanimationwithheightfixonlyworksfirsttime

Ivegotasearchfunctionloadingresultswithajaxandshowstheresultsusingaslideanimation.

I've got a search function loading results with ajax and shows the results using a slide animation. Works great! But only the first time unfortunately, the second time (and onwards) the slide down animation doesn't work.

我有一个搜索功能加载结果与ajax并使用幻灯片动画显示结果。效果很好!但只是第一次不幸的是,第二次(以及之后)下滑动画不起作用。

Please have a look here: http://jsfiddle.net/e4sQh/4/

请看这里:http://jsfiddle.net/e4sQh/4/

The search is'nt performed there and no ajax data is loaded but you get the point. Thanks for your help!

搜索没有在那里执行,没有加载ajax数据,但你明白了。谢谢你的帮助!

3 个解决方案

#1


0  

It's because your setting the height to 0 is inside your if check (which is only true the first time) here:

这是因为你将高度设置为0是在if检查中(这是第一次只有这样):

  // get the original height
  if( !height ){
    // get original height
    height = $el.show().height();
    // update the height
    $el.data("originalHeight", height);
    // if the element was hidden, hide it again
    if( !visible ) $el.hide().css({height: 0});
  }

It needs to be moved outside like this:

它需要像这样移到外面:

  // get the original height
  if( !height ){
    // get original height
    height = $el.show().height();
    // update the height
    $el.data("originalHeight", height);
  }
  // if the element was hidden, hide it again
  if( !visible ) $el.hide().css({height: 0});

This way it hides every time appropriately, you can test it out here.

这样它每次都适当隐藏,你可以在这里测试一下。

#2


0  

Replace

更换

slideToggle('#results',true); // inside hideLoading()

with

content.slideDown();

#3


0  

I think this part is wrong

我认为这部分是错误的

if( !height ){
    // get original height
    height = $el.show().height();
    // update the height
    $el.data("originalHeight", height);
    // if the element was hidden, hide it again
    if( !visible ) $el.hide().css({height: 0});
  }

You show element to get its height, so it doesn't slide as it's visible!

你显示元素来获得它的高度,所以它不会滑动,因为它是可见的!

You should use css() method to set position:absolute, visibility:hidden and display:block.

您应该使用css()方法设置position:absolute,visibility:hidden和display:block。

Anyway JQuery provides method which replace your function, take a look on slides

无论如何,JQuery提供了替换你的功能的方法,看看幻灯片


推荐阅读
  • 在现代Web应用中,当用户滚动到页面底部时,自动加载更多内容的功能变得越来越普遍。这种无刷新加载技术不仅提升了用户体验,还优化了页面性能。本文将探讨如何实现这一功能,并介绍一些实际应用案例。 ... [详细]
  • 本文详细介绍了中央电视台电影频道的节目预告,并通过专业工具分析了其加载方式,确保用户能够获取最准确的电视节目信息。 ... [详细]
  • 本文由杨勇和思远于2012年12月27日撰写,主要探讨了如何使用PHP进行网页内容抓取,特别是针对字符较多的网站。文章详细介绍了正则表达式失效的原因,并提供了优化方法,同时展示了如何抓取淘宝服饰栏、天气信息以及IP地址对应的地理位置。 ... [详细]
  • 本文探讨了为何相同的HTTP请求在两台不同操作系统(Windows与Ubuntu)的机器上会分别返回200 OK和429 Too Many Requests的状态码。我们将分析代码、环境差异及可能的影响因素。 ... [详细]
  • 本文详细探讨了JDBC(Java数据库连接)的内部机制,重点分析其作为服务提供者接口(SPI)框架的应用。通过类图和代码示例,展示了JDBC如何注册驱动程序、建立数据库连接以及执行SQL查询的过程。 ... [详细]
  • 深入解析 Apache Shiro 安全框架架构
    本文详细介绍了 Apache Shiro,一个强大且灵活的开源安全框架。Shiro 专注于简化身份验证、授权、会话管理和加密等复杂的安全操作,使开发者能够更轻松地保护应用程序。其核心目标是提供易于使用和理解的API,同时确保高度的安全性和灵活性。 ... [详细]
  • 本次考试于2016年10月25日上午7:50至11:15举行,主要涉及数学专题,特别是斐波那契数列的性质及其在编程中的应用。本文将详细解析考试中的题目,并提供解题思路和代码实现。 ... [详细]
  • 本文详细介绍了 org.apache.commons.io.IOCase 类中的 checkCompareTo() 方法,通过多个代码示例展示其在不同场景下的使用方法。 ... [详细]
  • 在Oracle数据库中,使用Dbms_Output.Put_Line进行输出调试时,若单行字符超过255个,则会遇到ORA-20000错误。本文介绍了一种有效的方法来处理这种情况,通过创建自定义包和视图,实现对长字符串的分割和正确输出。 ... [详细]
  • 利用决策树预测NBA比赛胜负的Python数据挖掘实践
    本文通过使用2013-14赛季NBA赛程与结果数据集以及2013年NBA排名数据,结合《Python数据挖掘入门与实践》一书中的方法,展示如何应用决策树算法进行比赛胜负预测。我们将详细讲解数据预处理、特征工程及模型评估等关键步骤。 ... [详细]
  • Nginx 反向代理与负载均衡实验
    本实验旨在通过配置 Nginx 实现反向代理和负载均衡,确保从北京本地代理服务器访问上海的 Web 服务器时,能够依次显示红、黄、绿三种颜色页面以验证负载均衡效果。 ... [详细]
  • 深入理解Vue.js:从入门到精通
    本文详细介绍了Vue.js的基础知识、安装方法、核心概念及实战案例,帮助开发者全面掌握这一流行的前端框架。 ... [详细]
  • 在PHP后端开发中遇到一个难题:通过第三方类文件发送短信功能返回的JSON字符串无法解析。本文将探讨可能的原因并提供解决方案。 ... [详细]
  • yikesnews第11期:微软Office两个0day和一个提权0day
    点击阅读原文可点击链接根据法国大选被黑客干扰,发送了带漏洞的文档Trumps_Attack_on_Syria_English.docx而此漏洞与ESET&FireEy ... [详细]
  • 本文探讨了在Django项目中,如何在对象详情页面添加前后导航链接,以提升用户体验。文章详细描述了遇到的问题及解决方案。 ... [详细]
author-avatar
加菲猫fd
这个家伙很懒,什么也没留下!
PHP1.CN | 中国最专业的PHP中文社区 | DevBox开发工具箱 | json解析格式化 |PHP资讯 | PHP教程 | 数据库技术 | 服务器技术 | 前端开发技术 | PHP框架 | 开发工具 | 在线工具
Copyright © 1998 - 2020 PHP1.CN. All Rights Reserved | 京公网安备 11010802041100号 | 京ICP备19059560号-4 | PHP1.CN 第一PHP社区 版权所有