jquery实例--动态效果

显示/隐藏：

• show/hide(speed,callback);
• toggle(speed,callback);

淡入淡出：

• fadeIn/fadeOut(speed,callback)；
• fadeToggle(speed,callback);
• fadeTo(speed,opacity,callback);

滑动：

• slideUp/slideDown(speed,callback);
• slideToggle(speed,callback);
  • demo:   配合siblings; :hidden; :visible

//以上对css中声明"visibility:hidden"的元素无效；

动画：

• animate({param},speed,callback);
  • demo
    • 注意元素初始的设置,position:relative;  widht,left....
    • 在一个param里写还是链式分开写执行顺序是不同的；
    • 默认为'px'，可以不用写；
    • 注意一般是属性设置到某个值，如果是递增某个值用{letft:'+=50'}
•  停止动画：stop(stopAll,goToEnd); 
  • demo
    • stopAll表示是否清除所有动画
    • goToEnd表示是否完成当前动画（直接跳到最后状态）；且只在stopAll为true时可用；
    • 停止包括show,hide,slide,fade,animate等；

滚动：滚动要页面某一部分；

• 格式：$('body').animate({scrollTop:$(selector).position().top}, 'slow');    //主要用到animate,scrollTop  demo
• window.scrollTo(x,y);       //DOM中的方法，x,y默认xp;但是没有缓冲效果；

设置高度：

• height(); 

var height = $(this).height();
$(this).height(height>300 ? 300 : height);

• 设置相同高度：使用DOM - style.height,   offsetHeight     //offsetHeight 在不同浏览器中可能包含内容不一样；
  • demo
    • 先进行元素的高度对比判断，再选择改变高度的元素；

文字闪烁效果：