Подключаем библиотеку Jquery
<head> <meta charset='utf-8'> <script src= "https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js" ></script> </head> <body> <div id='d1'> <div id='mydiv' style='height:200px;border:1px solid black;'>Привет мир</div> <button id='b1'>Спрятать надпись "Привет мир"</button> <button id='b2'>Показать надпись "Привет мир"</button> <button id='b3'>Переключить "Привет мир"</button> </div> <div id='d2' style='width:100px;height:100px;background:red;'> </div> <script> //$(".myclass"); //$("div"); $(document).ready(function(){ $("#d2").hide(); $("#b1").click(function(){ $("#mydiv").slideUp(1000); }); $("#b2").click(function(){ $("#mydiv").slideDown(1000); }); $("#b3").click(function(){ $("#d1").toggle(1000); $("#d2").toggle(1000); }); $("#d2").click(function(){ $("#d1").toggle(1000); $("#d2").toggle(1000); }); }); </script> </body>
Протестируйте простые функции
fadeOut
fadeIn
fadeToggle
slideUp
slideDown
slidetoggle
hide
show
toggle