fadeTo повторное нажатие на кнопку меню
Есть такой код
[html] <nav class="header_menu"> <a href="#">Hello</a> <a href="#">About</a> <a href="#">Services</a> <a href="#">Portfolio</a> <a href="#">Team</a> <a href="#">Blog</a> <a href="#">Contact</a> </nav> [CSS] .header_menu a { color: #fff; font: 18px 'Open Sans'; text-decoration: none; padding: 8px 17px; margin: 0px; } .header_menu .active { padding: 8px 17px; border: 1px solid #fff; border-radius: 50px; margin: -1px; opacity: 0; } [JS] $(document.body).on("click", ".header_menu a", function(){ $('.header_menu .active').removeClass('active'); $(this).addClass('active').fadeTo( "slow", 1, function(){ }); }); Если один раз нажал на кнопку, то второй раз анимация не пройдет, пока не обновишь страницу, почему так?:( |
Artem_A,
<!DOCTYPE HTML> <html> <head> <title>Untitled</title> <meta charset="utf-8"> <style type="text/css"> body{ background-color: #FF00FF; } .header_menu a { color: #fff; font: 18px 'Open Sans'; text-decoration: none; padding: 8px 17px; margin: 0px; } .header_menu .active { padding: 8px 17px; border: 1px solid #fff; border-radius: 50px; margin: -1px; opacity: 0; } </style> <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script> <script> $(function(){ $(document.body).on("click", ".header_menu a", function(){ $('.header_menu .active').removeClass('active'); $(this).css({opacity: 0}).addClass('active').stop(true,true).fadeTo( "slow", 1, function(){ }); }); }); </script> </head> <body> <nav class="header_menu"> <a href="#">Hello</a> <a href="#">About</a> <a href="#">Services</a> <a href="#">Portfolio</a> <a href="#">Team</a> <a href="#">Blog</a> <a href="#">Contact</a> </nav> </body> </html> |
рони,
СПАСИБОО!!!! А не подскажите как сделать чтобы анимация только с border работала, тоесть только она появлялась |
Artem_A,
<!DOCTYPE HTML> <html> <head> <title>Untitled</title> <meta charset="utf-8"> <style type="text/css"> body{ background-color: #FF00FF; } .header_menu a { color: #fff; font: 18px 'Open Sans'; text-decoration: none; padding: 8px 17px; margin: -1px; border: 1px solid transparent; border-radius: 50px; } .header_menu .active { transition: .8s all ease-in-out; padding: 8px 17px; border-color: #fff; } </style> <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script> <script> $(function(){ $(document.body).on("click", ".header_menu a", function(){ $('.header_menu .active').removeClass('active'); $(this).addClass('active') }); }); </script> </head> <body> <nav class="header_menu"> <a href="#">Hello</a> <a href="#">About</a> <a href="#">Services</a> <a href="#">Portfolio</a> <a href="#">Team</a> <a href="#">Blog</a> <a href="#">Contact</a> </nav> </body> </html> |
рони,
Гениально, большое спасибо вам!:dance: |
Часовой пояс GMT +3, время: 11:40. |