<!DOCTYPE html>
<html>
<head>
<script src="jquery.js"></script>
<script>
function callback()
{
alert(123);
}
$(document).ready(
function()
{
$("#test").click(function(){$(this).hide();});
$("#mydiv").click(function(){$("#test").hide();});
$("#mydiv1").click(function(){$("#test").show();});
$("#mydiv2").click(function(){$("#test").toggle(1000,callback);});
$(".mydiv3").click(function(){$("#test").fadeOut();});
$(".mydiv4").click(function(){$("#test").fadeIn();});
$(".mydiv5").click(function(){$("#test").fadeToggle(1000);});
$(".mydiv6").click(function(){$("#test").slideUp();});
$(".mydiv7").click(function(){$("#test").slideDown();});
$(".mydiv8").click(function(){$("#test").slideToggle(1000);});
$(".mydiv9").click(function()
{
$("#test").animate({left: '250px'});
$("#test").animate({top: '250px'});
$("#test").animate({left: '0px'});
$("#test").animate({top: '0px'});
}
);
$(".mydiv10").click(function()
{
$("#test").slideToggle(100).slideToggle(100).slideToggle(100).slideToggle(100).slideToggle(100).slideToggle(100).slideToggle(100).slideToggle(100).slideToggle(100).slideToggle(100).slideToggle(100);
}
);
$(".mydiv11").click(function()
{
$("#test").animate({color: '#ff0000'});
}
);
$(".mydiv12").click(function()
{
$(".mydiv12").html("Текст изменен");
$("input").val("Значение изменено");
alert($("input").val());
}
);
}
);
</script>
</head>
<body>
<h1>Продемонстрировать show эффект</h1>
<button id='mydiv'>Скрыть все</button>
<button id='mydiv1'>Показать</button>
<button id='mydiv2'>Переключить</button>
<hr>
<h1>Продемонстрировать fade эффект</h1>
<button class='mydiv3'>Затуманить все</button>
<button class='mydiv4'>Показать</button>
<button class='mydiv5'>Переключить</button>
<hr>
<h1>Продемонстрировать slide эффект</h1>
<button class='mydiv6'>Свернуть все</button>
<button class='mydiv7'>Показать</button>
<button class='mydiv8'>Переключить</button>
<hr>
<h1>Продемонстрировать animate эффект</h1>
<button class='mydiv9'>Анимация</button>
<hr>
<h1>Продемонстрировать chaining эффект</h1>
<button class='mydiv10'>Цепная реакция</button>
<hr>
<h1>Продемонстрировать анимацию цвета</h1>
<button class='mydiv11'>Анимируем цвет</button>
<hr>
<h1>Изменить HTML</h1>
<button class='mydiv12'>Изменить</button>
<div id='test' style='background:gray;position:relative;width:500px;'>
<p>Щелкни по мне и я исчезну</p>
<p>Кликни и я пропаду тоже!</p>
<p>И по мне!</p>
<input>
</div>
</body>
</html>