У меня есть 10px-бар в верхней части экрана, который при щелчке, я хочу, чтобы он анимировал высоту 40 пикселей, а затем, если щелкнуть снова, оживите назад до 10 пикселей. Я попытался изменить идентификатор div, но он не работает. Как я могу заставить это работать, или есть лучший способ сделать это?
body html:
<div id="topbar-show"></div>
CSS
#topbar-show { width: 100%; height: 10px; background-color: #000; }
#topbar-hide { width: 100%; height: 40px; background-color: #000; }
JavaScript:
$(document).ready(function(){
$("#topbar-show").click(function(){
$(this).animate({height:40},200).attr('id', 'topbar-hide');
});
$("#topbar-hide").click(function(){
$(this).animate({height:10},200).attr('id', 'topbar-show');
});
});