Анимация с блоками
Помогите пожалуйста помочь с анимацией , хочу сделать 4 блока горизонтальных в один ряд , на каждом блоке есть контент и кнопка , при нажатии на кнопку 3 других блока исчезают(по очереди), а тот на котором была нажата кнопка плавно растягивается на 100% строки , ну и при закрытии все обратно (блок стягивается и появляются прежние блоки), дело в том что работаю с сеткой bootstrap, и нужно сохранить адаптацию блоков
, додумался только до такого кода , сама анимация работает , но кривовато , первые два блока анимируются плавно , а последние 2 при свертывании резко прыгают влево исчезают и становятся на свое место, то есть когда я задаю изначальную ширину блока он прыгает не на свое место в сетке пока не появились другие 3 блока. Извините за такой код неграмотный , сижу уже 6 часов не могу сделать, подскажите пожалуйста что можно сделать чтобы была плавная анимация поочередная, чтобы блоки сохраняли свое положение и не прыгали при развертке на другие места в сетке, и если можно дайте совет как код сократить <div class="container-fluid"> <div class="row main_blocks_active"> <div class="col-md-3 transition_blocks"> <div id="blocks"> <div class="block_text"> </div> <input type="button" value="Читать" id="button_block_info"> </div> </div> <div class="col-md-3 transition_blocks"> <div id="blocks"> <div class="block_text"> </div> <input type="button" value="Читать" id="button_block_info"> </div> </div> <div class="col-md-3 transition_blocks"> <div id="blocks"> <div class="block_text"> </div> <input type="button" value="Читать" id="button_block_info"> </div> </div> <div class="col-md-3 transition_blocks"> <div id="blocks"> <div class="block_text"> </div> <input type="button" value="Читать" id="button_block_info"> </div> </div> </div> </div> $('#blocks > #button_block_info').click(function(){ $(this).parent('#blocks').addClass('active_blocks'); $('#blocks:not(.active_blocks)').addClass('hidden_blocks'); $('.hidden_blocks:eq(0)').fadeOut(700, function(){ $('.hidden_blocks:eq(1)').fadeOut(700, function(){ $('.hidden_blocks:eq(2)').fadeOut(700, function(){ $('.hidden_blocks:eq(3)').fadeOut(700); $('.active_blocks').parent('.col-md-3').removeClass('col-md-3').addClass('col-md-12'); $('.active_blocks').css("maxWidth","100%",700); }); }); }); }); $('.button_show').click(function(){ $('.active_blocks').parent('.col-md-12').removeClass('col-md-12').addClass('col-md-3'); $('.active_blocks').css("maxWidth","285px",300); $('div .hidden_blocks:eq(0)').fadeIn(700, function(){ $('div .hidden_blocks:eq(1)').fadeIn(700, function(){ $('div .hidden_blocks:eq(2)').fadeIn(700, function(){ $('.active_blocks').removeClass('active_blocks'); $('.hidden_blocks').removeClass('hidden_blocks'); }); }); }); }); |
Часовой пояс GMT +3, время: 08:13. |