热门标签 | 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提供了替换你的功能的方法,看看幻灯片


推荐阅读
  • 前言--页数多了以后需要指定到某一页(只做了功能,样式没有细调)html ... [详细]
  • 一个登陆界面
    预览截图html部分123456789101112用户登入1314邮箱名称邮箱为空15密码密码为空16登 ... [详细]
  • 本章将深入探讨移动 UI 设计的核心原则,帮助开发者构建简洁、高效且用户友好的界面。通过学习设计规则和用户体验优化技巧,您将能够创建出既美观又实用的移动应用。 ... [详细]
  • 本文介绍了多个关于JavaScript的书籍资源、实用工具和编程实例,涵盖从入门到进阶的各个阶段,帮助读者全面提升JavaScript编程能力。 ... [详细]
  • 在现代Web应用中,当用户滚动到页面底部时,自动加载更多内容的功能变得越来越普遍。这种无刷新加载技术不仅提升了用户体验,还优化了页面性能。本文将探讨如何实现这一功能,并介绍一些实际应用案例。 ... [详细]
  • 基于JQuery实现的评分插件
    本文介绍了一个使用JQuery创建的交互式评分控件。当用户将鼠标悬停在星星上时,左侧的星星会变为实心,右侧保持空心,并显示对应的评分等级;移开鼠标后,所有星星恢复为空心状态。 ... [详细]
  • 深入理解Vue.js:从入门到精通
    本文详细介绍了Vue.js的基础知识、安装方法、核心概念及实战案例,帮助开发者全面掌握这一流行的前端框架。 ... [详细]
  • 本文详细介绍了如何使用 HTML 和 CSS 对文件上传按钮进行样式美化,使用户界面更加友好和美观。 ... [详细]
  • 本文探讨了2019年前端技术的发展趋势,包括工具化、配置化和泛前端化等方面,并提供了详细的学习路线和职业规划建议。 ... [详细]
  • 导航栏样式练习:项目实例解析
    本文详细介绍了如何创建一个具有动态效果的导航栏,包括HTML、CSS和JavaScript代码的实现,并附有详细的说明和效果图。 ... [详细]
  • 本文详细解析了Python中的os和sys模块,介绍了它们的功能、常用方法及其在实际编程中的应用。 ... [详细]
  • 本文探讨了如何在给定整数N的情况下,找到两个不同的整数a和b,使得它们的和最大,并且满足特定的数学条件。 ... [详细]
  • 在使用 MUI 框架进行应用开发时,开发者常常会遇到 mui.init() 和 mui.plusReady() 这两个方法。本文将详细解释它们的区别及其在不同开发环境下的应用。 ... [详细]
  • 本文讨论了如何根据特定条件动态显示或隐藏文件上传控件中的默认文本(如“未选择文件”)。通过结合CSS和JavaScript,可以实现更灵活的用户界面。 ... [详细]
  • 在网站制作中随时可用的10个 HTML5 代码片段
    HTML很容易写,但创建网页时,您经常需要重复做同样的任务,如创建表单。在这篇文章中,我收集了10个超有用的HTML代码片段,有HTML5启动模板、空白图片、打电话和发短信、自动完 ... [详细]
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社区 版权所有