天天看點

jquery展開收縮

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

<title>jquery展開、收縮</title>

<script type="text/javascript" src="http://www.codefans.net/ajaxjs/jquery-1.6.2.min.js"></script>

</head>

<script type="text/javascript">

// 收縮展開效果

$(document).ready(function(){

   $(".box h2").toggle(function(){

    $(this).next(".text").animate({height: 'toggle', opacity: 'toggle'}, "slow");

   },function(){

    $(this).next(".text").animate({height: 'toggle', opacity: 'toggle'});

   });

});

</script>