Базовые эффекты
К базовым эффектам анимации относятся hide(); show(); toggle() Посмотрим пример с toggle();
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 |
<!doctype html> <html lang="en"> <head> <meta charset="utf-8"> <title>hide demo</title> <style> p { background-color: #dad, font-weight: bold; } </style> <script src="https://code.jquery.com/jquery-1.10.2.js"></script> </head> <body> <button>Show me toggle()</button> <p>One paragraph</p> <p>Another paragraph</p> <p>One more paragraph</p> <script> $( "button" ).click(function() { $( "p" ).toggle( "slow" ); }); </script> </body> </html> |
Эффекты скольжения
slideUp(),slideDown, slideToggle(),
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 |
<!doctype html> <html lang="en"> <head> <meta charset="utf-8"> <title>hide demo</title> <style> p { background: #dad; font-weight: bold; } </style> <script src="https://code.jquery.com/jquery-1.10.2.js"></script> </head> <body> <button>Show me toggle()</button> <p>One paragraph</p> <p>Another paragraph</p> <p>One more paragraph</p> <script> $( "button" ).click(function() { $( "p" ).slideToggle( "slow" ); // <<<< изменили здесь }); </script> </body> </html> |
Эффекты прозрачности
fadeOut(), fadeIn(), fadeTo() и fadeToggle()
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 |
<!doctype html> <html lang="en"> <head> <meta charset="utf-8"> <title>hide demo</title> <style> p { background: #dad; font-weight: bold; } </style> <script src="https://code.jquery.com/jquery-1.10.2.js"></script> </head> <body> <button>Show me toggle()</button> <p>One paragraph</p> <p>Another paragraph</p> <p>One more paragraph</p> <script> $( "button" ).click(function() { $( "p" ).fadeToggle( "slow" ); // << изменили здесь }); </script> </body> </html> |