动画切换的比较 (jQuery)

1jQuery中toggle与slideToggle以及fadeToggle的比较

操作元素的显示和隐藏可以有几种方法。

例如：

  • 改变样式display为none
  • 设置位置高度为0
  • 设置透明度为0

都能达到这个目的，并且针对这样的处理jQuery都提供了各自的方法。show/hide、sildeDown/sildeUp、fadeIn/fadeOut。除此之外，还引入了toggle、sildeToggle以及fadeToggle切换方法

toggle、sildeToggle以及fadeToggle的区别：

  • toggle：切换显示与隐藏效果
  • sildeToggle：切换上下拉卷滚效果
  • fadeToggle：切换淡入淡出效果

当然细节上还是有更多的不同点:

toggle与slideToggle细节区别：

  • toggle：动态效果为从右至左。横向动作，toggle通过display来判断切换所有匹配元素的可见性
  • slideToggle：动态效果从下至上。竖向动作，slideToggle 通过高度变化来切换所有匹配元素的可见性

fadeToggle方法

  • fadeToggle() 方法在 fadeIn() 和 fadeOut() 方法之间切换。
  • 元素是淡出显示的，fadeToggle() 会使用淡入效果显示它们。
  • 元素是淡入显示的，fadeToggle() 会使用淡出效果显示它们。
  • 注释：隐藏的元素不会被完全显示（不再影响页面的布局）
时间： 2024-08-10 21:13:02

动画切换的比较 (jQuery)的相关文章

JQuery动画插件Velocity.js发布：更快的动画切换速度

5月3日,Julian在其GitHub上发布了Velocity.js.Velocity.js是一款动画切换的jQuery插件,它重新实现了jQuery的$.animate()方法从而加快动画切换的速度.Velocity.js只有7k的大小,它不仅包含了$.animate()的所有功能,并且还包含了颜色切换.转换(transform).循环.缓动.CSS切换.Scroll功能,它是jQuery. jQuery UI.CSS变换 在动画方面的最佳组合.Velocity.js支持IE8+.Chrome

jQuery鼠标悬停内容动画切换效果

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html><head><meta http-equiv="content-type" content="text/html; charset=UTF-8&

JS框架_(jQuery.js)文章全屏动画切换

文章全屏动画切换效果 <!doctype html> <html lang="zh"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"> <meta name="viewport" content="

动画切换view布局

动画切换view布局,可用于滚屏显示评论等例子 package com.example.animationviewdemo; import android.content.Context; import android.content.res.TypedArray; import android.os.Handler; import android.util.AttributeSet; import android.view.View; import android.view.animation

iOS_20_微博自定义可动画切换的导航控制器

最终效果: AnimatedNavigationController.h // // AnimatedNavigationController.h // 20_帅哥no微博 // // Created by beyond on 14-8-10. // Copyright (c) 2014年 com.beyond. All rights reserved. // 继承自导航控制器,但是多了一个功能,可以监听手势,进行动画切换 #import <UIKit/UIKit.h> @interface

swift 动画切换View心地层次顺序

1.动画效果 2.代码 // // AppDelegate.swift // AnimationDemo // // Created by 赵超 on 14-6-27. // Copyright (c) 2014年 赵超. All rights reserved. // import UIKit @UIApplicationMain class AppDelegate: UIResponder, UIApplicationDelegate { var window: UIWindow? //响应

语音输入和文字输入动画切换

随着语音的快速普及,很多应用都开始增加语音输入功能.下面是一个简单的语音和文字输入的动画切换: 布局文件: <ViewFlipper android:id="@+id/viewFlipper1" android:layout_width="fill_parent" android:layout_height="wrap_content" android:layout_alignParentBottom="true" &g

Activity左边滑出，右边滑入的动画切换

Activity左边滑出,右边滑入的动画切换 转载请注明出处:http://blog.csdn.net/u012301841/article/details/46920809 大家都知道Android系统默认Activity间的动画切换效果为:左边滑出.右边滑入,按返回键的动画切换效果为:左边滑入,右边滑出.但是现在的手机制造商都定制自己的Rom,像MI UI和锤子OS等之类的手机,导致Android原生的切换动画在不同的手机上发生了改变,有时候我们需要让他变回原生的状态. 这是我在网上盗的一张

tabbar动画切换

效果1: UIViewController *vc = self.viewControllers[self.selectedIndex]; CATransition *animation =[CATransition animation]; [animation setDuration:0.75f]; [animation setTimingFunction:[CAMediaTimingFunctionfunctionWithName:kCAMediaTimingFunctionDefault]