jQuery学习之动画效果-优快云博客

使元素显示和隐藏

show

hide

1.实现可折叠的列表

$('li:has(ul)')
  .click(function(event){
	if (this == event.target) {
	  if ($(this).children().is(':hidden')) {
		$(this)
		  .css('list-style-image','url(minus.gif)')
		  .children().show();k
	  }
	  else {
		$(this)
		  .css('list-style-image','url(plus.gif)')
		  .children().hide();
	  }
	}
	return false;
  })
  .css('cursor','pointer')
  .click();
$('li:not(:has(ul))').css({
  cursor: 'default',
  'list-style-image':'none'
});

2.切换元素的显示状态
toggle

可以切换显示和隐藏状态，替代show和hide

以动画方式使函数显示和隐藏

1.使元素逐渐地显示和隐藏
hide show和toggle
都可以有相应的效果，加入参数(speed,callback)

其中speed可以是数字，也可以是slow，fast等字符串

2.使元素淡入和淡出
fadeIn(speed,callback)
fadeOut(speed,callback)

fadeTo(speed,opacity,callback)

3.使元素滑上和滑下
slideDown(speed,callback)
展现
slideUp(speed,callback)
收起 display:none

slideToggle(speed,callback)

4.使动画静止

stop()

创建自定义的动画

1.animate(properties,duration,easing,callback)
animate(properties,options)
properties:指定动画结束时候，CSS样式应该到达的最终值。从当前值到最终值的过度调整而产生动画。
duration:slow normal fast或者是数字
easing:用来实现动画的缓和效果。
callback:动画完成时调用的函数 this

$('#scaleButton').click(function(){
          $('#testSubject').each(function(){
            $(this).animate(
              {
                width: $(this).width() * 2,
                height: $(this).height() * 2
              },
              'slow'
            );
          });
        });


        $('#dropButton').click(function(){
          $('#testSubject').each(function(){
            $(this)
              .css('position','relative')
              .animate(
                {
                  opacity: 'hide',
                  top: $(window).height() - $(this).height() -
                       $(this).position().top
                },
                'slow',
                function(){ $(this).hide(); });
          });
        });


        $('#puffButton').click(function(){
          $('#testSubject').each(function(){
            var position = $(this).position();
            $(this)
              .css({position:'absolute',top:position.top,
                    left:position.left})
              .animate(
                {
                  opacity: 'hide',
                  width: $(this).width() * 5,
                  height: $(this).height() * 5,
                  top: position.top - ($(this).height() * 5 / 2),
                  left: position.left - ($(this).width() * 5 / 2)
                },
                'normal');
          });
        });