-
停止动画stop 动画在执行过程中是允许被暂停的，当一个元素调用.stop()方法，当前正在运行的动画（如果有的话）立即停止 语法： .stop( [clearQueue ] [, jumpToEnd ] ) .stop( [queue ] [, clearQueue ] [, jumpToEnd ] ) stop还有几个可选的参数，简单来说可以这3种情况 .stop(); 停止当前动画，点击在暂停处继续开始 .stop(true); 如果同一元素调用多个动画方法，尚未被执行的动画被放置在元素的效果队列中。这些动画不会开始，直到第一个完成。当调用.stop()的时候，队列中的下一个动画立即开始。如果clearQueue参数提供true值,那么在队列中的动画其余被删除并永远不会运行 .stop(true,true); 当前动画将停止，但该元素上的 CSS 属性会被立刻修改成动画的目标值 简单的说：参考下面代码、 $("#aaron").animate({ height: 300 }, 5000) $("#aaron").animate({ width: 300 }, 5000) $("#aaron").animate({ opacity: 0.6 }, 2000) stop()：只会停止第一个动画，第二个第三个继续 stop(true)：停止第一个、第二个和第三个动画 stop(true ture)：停止动画，直接跳到第一个动画的最终状态 值得注意的问题： 如果动画未完成停止了，那么动画完成时执行的回调函数是不会被调用的查看全部
-
.animate( properties [, duration ] [, easing ] [, complete ] ) .animate( properties, options ) 参数分解： properties：一个或多个css属性的键值对所构成的Object对象。要特别注意所有用于动画的属性必须是数字的，除非另有说明；这些属性如果不是数字的将不能使用基本的jQuery功能。比如常见的，border、margin、padding、width、height、font、left、top、right、bottom、wordSpacing等等这些都是能产生动画效果的。background-color很明显不可以，因为参数是red或者GBG这样的值，非常用插件，否则正常情况下是不能只能动画效果的。注意，CSS 样式使用 DOM 名称（比如 "fontSize"）来设置，而非 CSS 名称（比如 "font-size"）。 特别注意单位，属性值的单位像素（px）,除非另有说明。单位em 和 %需要指定使 .animate({ left: 50, width: '50px' opacity: 'show', fontSize: "10em", }, 500); 除了定义数值，每个属性能使用'show', 'hide', 和 'toggle'。这些快捷方式允许定制隐藏和显示动画用来控制元素的显示或隐藏 .animate({ width: "toggle" }); 如果提供一个以+= 或 -=开始的值，那么目标值就是以这个属性的当前值加上或者减去给定的数字来计算的 .animate({ left: '+50px' }, "slow"); duration时间 动画执行的时间，持续时间是以毫秒为单位的；值越大表示动画执行的越慢，不是越快。还可以提供'fast' 和 'slow'字符串，分别表示持续时间为200 和 600毫秒。 easing动画运动的算法 jQuery库中是默认的时调用 swing。在一个恒定的速度进行动画，如果需要其他的动画算法，请查找相关的插件查看全部
-
淡入效果fadeTo 淡入淡出fadeIn与fadeOut都是修改元素样式的opacity属性，但是他们都有个共同的特点，变化的区间要么是0，要么是1 fadeIn：淡出效果，即要显示出来，opacity是0到1 fadeOut：淡入效果，即要隐藏出来，opacity是1到0 如果要让元素保持动画效果，执行opacity = 0.5的效果时，要如何处理？ 如果不考虑CSS3，我们用JS实现的话，基本就是通过定时器，在设定的时间内一点点的修改opacity的值，最终为0.5，原理虽说简单，但是总不如一键设置这么舒服，jQuery提供了fadeTo方法，可以让改变透明度一步到位 语法 .fadeTo( duration, opacity [, complete ] ) 必需的 duration参数规定效果的时长。它可以取以下值："slow"、"fast" 或毫秒。fadeTo() 方法中必需的 opacity 参数将淡入淡出效果设置为给定的不透明度（值介于 0 与 1 之间）。可选的 callback 参数是该函数完成后所执行的函数名称。查看全部
-
1、操作元素的显示和隐藏可以有几种方法。 （1）例如： ①改变样式diplay为none ②位置高度为0 ③透明度为0 都能达到这个目的 （2）并且针对这样的处理jQuery都提供了各自的方法： ①show/hide ②sildeDown/sildeUp ③fadeIn/fadeOut。 除此之外，还引入了toggle、sildeToggle以及fadeToggle切换方法 2、toggle、sildeToggle以及fadeToggle的区别： ①toggle：切换显示与隐藏效果 ②sildeToggle：切换上下拉卷滚效果 ③fadeToggle：切换淡入淡出效果 （1）toggle与slideToggle细节区别： ①toggle：动态效果为从右至左。横向动作，toggle通过display来判断切换所有匹配元素的可见性 ②slideToggle：动态效果从下至上。竖向动作，slideToggle通过高度变化来切换所有匹配元素的可见性 （2）fadeToggle方法 fadeToggle()方法在fadeIn()和fadeOut()方法之间切换。 ①元素是淡出显示的，fadeToggle()会使用淡入效果显示它们。 ②元素是淡入显示的，fadeToggle()会使用淡出效果显示它们。 注释：隐藏的元素不会被完全显示（不再影响页面的布局）查看全部
-
1、淡入淡出fadeIn与fadeOut都是修改元素样式的opacity属性，但是他们都有个共同的特点，变化的区间要么是0，要么是1 ①fadeIn：淡出效果，即要显示出来，opacity是0到1 ②fadeOut：淡入效果，即要隐藏出来，opacity是1到0 2、如要让元素保持动画效果，执行opacity = 0.5的效果时，要如何处理？ 如果不考虑CSS3，我们用JS实现的话，基本就是通过定时器，在设定的时间内一点点的修改opacity的值，最终为0.5。原理虽说简单，但是总不如一键设置这么舒服，jQuery提供了fadeTo方法，可以让改变透明度一步到位 3、fadeTo方法 （1）语法：.fadeTo( duration, opacity [, complete ] ) ①必需的duration参数规定效果的时长。可取值："slow"、"fast"或毫秒。 ②fadeTo()方法中必需的opacity参数将淡入淡出效果设置为给定的不透明度（值介于0与1之间）。 ③可选的callback参数是该函数完成后所执行的函数名称。查看全部
-
淡入动画fadeIn fadeOut是淡出效果，相反的还有淡入效fadeIn,方法使用上两者都是一致的，只是结果相反 .fadeIn( [duration ] [, complete ] ) duration：指定过渡动画运行多长时间(毫秒数)，默认值为400。该参数也可以为字符串"fast"(=200)或"slow"(=600)。 元素显示完毕后需要执行的函数。函数内的this指向当前DOM元素。 fadeIn()函数用于显示所有匹配的元素，并带有淡入的过渡动画效果。 注意： 淡入的动画原理：操作元素的不透明度从0%逐渐增加到100% 如果元素本身是可见的，不对其作任何改变。如果元素是隐藏的，则使其可见查看全部
-
1、fadeToggle()函数：用于切换所有匹配的元素，并带有淡入/淡出的过渡动画效果。之前也学过toggle、slideToggle 也是类似的处理方式 fadeToggle切换fadeOut与fadeIn效果，所谓"切换"，即如果元素当前是可见的，则将其隐藏(淡出)；如果元素当前是隐藏的，则使其显示(淡入)。 （1）常用语法：.fadeToggle( [duration ] [, complete ] ) ①可选的duration参数规定效果的时长。可取值："slow"、"fast"或毫秒。 ②可选的callback参数是 fadeToggle完成后所执行的函数名称。 （2）fadeToggle()方法可以在fadeIn()与fadeOut()方法之间进行切换。如果元素已淡出，则 fadeToggle() 会向元素添加淡入效果；如果元素已淡入，则 fadeToggle()会向元素添加淡出效果。查看全部
-
1、淡入动画fadeIn ①fadeOut：淡出效果 ②fadeIn：淡入效果（方法使用上两者都是一致的，只是结果相反） （1）.fadeIn( [duration ] [, complete ] ) ①duration：指定过渡动画运行多长时间(毫秒数)，默认值为400。该参数也可以为字符串"fast"(=200)或"slow"(=600)。 ②元素显示完毕后需要执行的函数。函数内的this指向当前DOM元素。 （2）fadeIn()函数：用于显示所有匹配的元素，并带有淡入的过渡动画效果。 注意： ①淡入的动画原理：操作元素的不透明度从0%逐渐增加到100% ②如果元素本身是可见的，不对其作任何改变；如果元素是隐藏的，则使其可见。查看全部
-
淡出动画fadeOut 让元素在页面不可见，常用的办法就是通过设置样式的display:none。除此之外还可以一些类似的办法可以达到这个目的。这里要提一个透明度的方法，设置元素透明度为0，可以让元素不可见，透明度的参数是0~1之间的值，通过改变这个值可以让元素有一个透明度的效果。常见的淡入淡出动画正是这样的原理。 fadeOut()函数用于隐藏所有匹配的元素，并带有淡出的过渡动画效果 所谓"淡出"隐藏的，元素是隐藏状态不对作任何改变，元素是可见的，则将其隐藏。 .fadeOut( [duration ] [, complete ] ) 通过不透明度的变化来实现所有匹配元素的淡出效果，并在动画完成后可选地触发一个回调函数。这个动画只调整元素的不透明度，也就是说所有匹配的元素的高度和宽度不会发生变化。 字符串 'fast' 和 'slow' 分别代表200和600毫秒的延时。如果提供任何其他字符串，或者这个duration参数8被省略，那么默认使用400毫秒的延时查看全部
-
1、让元素在页面不可见 ①常用的办法：通过设置样式的display:none。 ②还有一个透明度的方法：设置元素透明度为0，可以让元素不可见，透明度的参数是0~1之间的值，通过改变这个值可以让元素有一个透明度的效果。常见的淡入淡出动画正是这样的原理。 2、fadeOut()函数：用于隐藏所有匹配的元素，并带有淡出的过渡动画效果 所谓"淡出"隐藏：元素是隐藏状态不对作任何改变；元素是可见的，则将其隐藏。 （1）.fadeOut( [duration ] [, complete ] ) ①通过不透明度的变化来实现所有匹配元素的淡出效果，并在动画完成后可选地触发一个回调函数。这个动画只调整元素的不透明度，也就是说所有匹配的元素的高度和宽度不会发生变化。 ②字符串'fast'和'slow'分别代表200和600毫秒的延时。如果提供任何其他字符串，或者这个duration参数8被省略，那么默认使用400毫秒的延时查看全部
-
上卷下拉切换slideToggle slideDown与slideUp是一对相反的方法。需要对元素进行上下拉卷效果的切换，jQuery提供了一个便捷方法slideToggle用滑动动画显示或隐藏一个匹配元素 基本的操作：slideToggle(); 这是最基本的操作，获取元素的高度，使这个元素的高度发生改变，从而让元素里的内容往下或往上滑。 提供参数：.slideToggle( [duration ] [, complete ] ) 同样的提供了时间、还有动画结束的回调。在参数对应的时间内，元素会完成动画，然后出发回调函数 同时也提供了时间的快速定义，字符串 'fast' 和 'slow' 分别代表200和600毫秒的延时 slideToggle("fast") slideToggle("slow") 注意： display属性值保存在jQuery的数据缓存中，所以display可以方便以后可以恢复到其初始值 当一个隐藏动画后，高度值达到0的时候，display 样式属性被设置为none，以确保该元素不再影响页面布局查看全部
-
上卷动画slideUp 对于显示的元素，在将其隐藏的过程中，可以对其进行一些变化的动画效果。之前学过了hide方法，hide方法在显示的过程中也可以有动画，但 是.hide()方法将为匹配元素的宽度，高度，以及不透明度，同时进行动画操作。这里将要学习一个新的显示方法slideUp方法 最简单的使用：不带参数 $("elem").slideUp(); 这个使用的含义就是：找到元素的高度，然后采用一个下滑动画让元素一直滑到隐藏，当高度为0的时候，也就是不可见的时，修改元素display 样式属性被设置为none。这样就能确保这个元素不会影响页面布局了 带参数： .slideUp( [duration ] [, easing ] [, complete ] ) 同样可以提供一个时间，然后可以使用一种过渡使用哪种缓动函数，jQuery默认就2种，可以通过下载插件支持。最后一个动画结束的回调方法。 因为动画是异步的，所以要在动画之后执行某些操作就必须要写到回调函数里面，这里要特别注意查看全部
-
toggle();如果元素是显示的，它会被隐藏。如果隐藏的，它会被显示。 如果一个元素的display值为inline，然后是隐藏和显示，这个元素将再次显示inline .toggle([duration][,complete])提供了持续的时间，还有动画结束的回调。 toggle(display) 确定是show还是hide if(display === true){ $("elem").show() }else if(display === false){ $("elem").hide() }查看全部
-
下拉动画slideDown 对于隐藏的元素，在将其显示出来的过程中，可以对其进行一些变化的动画效果。之前学过了show方法，show方法在显示的过程中也可以有动画，但是.show()方法将为匹配元素的宽度，高度，以及不透明度，同时进行动画操作。这里将要学习一个新的显示方法slideDown方法 .slideDown()：用滑动动画显示一个匹配元素 .slideDown()方法将给匹配元素的高度的动画，这会导致页面的下面部分滑下去，弥补了显示的方式 常见的操作，提供一个动画是时间，然后传递一个回调，用于知道动画是什么时候结束 .slideDown( [duration ] [, complete ] ) 持续时间（duration）是以毫秒为单位的，数值越大，动画越慢，不是越快。字符串 'fast' 和 'slow' 分别代表200和600毫秒的延时。如果提供任何其他字符串，或者这个duration参数被省略，那么默认使用400 毫秒的延时。 具体使用： $("ele").slideDown(1000, function() { //等待动画执行1秒后,执行别的动作.... }); 注意事项： 下拉动画是从无到有，所以一开始元素是需要先隐藏起来的，可以设置display:none 如 果提供回调函数参数，callback会在动画完成的时候调用。将不同的动画串联在一起按顺序排列执行是非常有用的。这个回调函数不设置任何参数，但是 this会设成将要执行动画的那个DOM元素，如果多个元素一起做动画效果，那么要非常注意，回调函数会在每一个元素执行完动画后都执行一次，而不是这组 动画整体才执行一次查看全部
-
显示与隐藏切换toggle方法 show与hide是一对互斥的方法。需要对元素进行显示隐藏的互斥切换，通常情况是需要先判断元素的display状态，然后调用其对应的处理方法。比如显示的元素，那么就要调用hide，反之亦然。 对于这样的操作行为，jQuery提供了一个便捷方法toggle用于切换显示或隐藏匹配元素 基本的操作：toggle(); 这是最基本的操作，处理元素显示或者隐藏，因为不带参数，所以没有动画。通过改变CSS的display属性，匹配的元素将被立即显示或隐藏，没有动画。 如果元素是最初显示，它会被隐藏 如果隐藏的，它会显示出来 display属性将被储存并且需要的时候可以恢复。如果一个元素的display值为inline，然后是隐藏和显示，这个元素将再次显示inline 提供参数：.toggle( [duration ] [, complete ] ) 同样的提供了时间、还有动画结束的回调。在参数对应的时间内，元素会发生显示/隐藏的改变，在改变的过程中会把元素的高、宽、不透明度进行一系列动画。这个元素其实就是show与hide的方法 直接定位：.toggle(display) 直接提供一个参数，指定要改变的元素的最终效果 其实就是确定是使用show还是hide方法 if ( display === true ) { $( "elem" ).show(); } else if ( display === false ) { $( "elem" ).hide(); }查看全部
举报
0/150
提交
取消