bxslider change width onclick

Question

У меня есть меню рядом с моим bxslider, который я могу вставлять и выходить. Поэтому мой слайдер изменит размер. Когда я делаю это, bxslider либо скрывает части моих изображений, либо показывает уже части следующего слайда.

Я решил это, уничтожив и перезагрузив ползунок. Мне нужно подождать, пока переход css не будет завершен, иначе он не сработает, но теперь он выглядит довольно странным. Есть ли другое решение для моей проблемы?

Редактирование: Я бы хотел, чтобы это тоже выглядело, когда вы изменяете размер окна с помощью чувствительного слайдера. Так что никаких прыгающих переходов.

http://jsfiddle.net/r6fvg3ov/2/

<section id="work"> 
<div id="navigation" class="hidden"> 
    <a href="javascript:;" id="menu-btn" class="menu-btn"><span></span></a> 

    <ul class="main"> 
     <li><a data-slide-index="2">men1</a> 

      <ul class="sub1"> 
       <li><a data-slide-index="1">men2.1</a> 

        <ul class="sub2"> 
         <li><a data-slide-index="1">men2.1.1</a> 

         </li> 
         <li><a data-slide-index="2">men2.1.2</a> 

         </li> 
         <li><a data-slide-index="0">men2.1.3</a> 

         </li> 
        </ul> 
       </li> 
       <li><a data-slide-index="1">men2.2</a> 

       </li> 
      </ul> 
     </li> 
    </ul> 
</div> 
<div id="slider" class="full"> 
    <div class="gallery"> 
     <ul class="bxslider"> 
      <li> 
       <img src="http://bxslider.com/images/730_200/hill_trees.jpg" /> 
      </li> 
      <li> 
       <img src="http://bxslider.com/images/730_200/me_trees.jpg" /> 
      </li> 
      <li> 
       <img src="http://bxslider.com/images/730_200/houses.jpg" /> 
      </li> 
      <li> 
       <img src="http://bxslider.com/images/730_200/tree_root.jpg" /> 
      </li> 
      <li> 
       <img src="http://bxslider.com/images/730_200/hill_fence.jpg" /> 
      </li> 
      <li> 
       <img src="http://bxslider.com/images/730_200/trees.jpg" /> 
      </li> 
     </ul> 
    </div> 
</div> 
</section> 

это мое решение до сих пор:

$(document).ready(function() { 
var slider = $('.bxslider').bxSlider({ 
    pagerCustom: '#navi', 
}); 

$('#menu-btn').click(function() { 
    $('#navigation').toggleClass('visible'); 
    $('#navigation').toggleClass('hidden'); 
    $('#slider').toggleClass('resized'); 
    $('#slider').toggleClass('full'); 
    setTimeout(function() { 
     slider.destroySlider(); 
     slider.reloadSlider(); 
    }, 500); 

}); 

}); 

спасибо за вашу помощь!

Answer 1

JSFiddle не загружается для меня атм, но я думаю, что это должно сделать работу:.

$('#slider') 
      .toggleClass('resized') 
      .toggleClass('full') 
      .on('oanimationend animationend webkitAnimationEnd otransitionend oTransitionEnd msTransitionEnd mozAnimationEnd MSAnimationEnd',function(){ 
     slider.destroySlider(); 
     slider.reloadSlider(); 
    }) 

Просто запустите .он («...») слушатель события на объекте DOM анимируемого (в ваш случай это $ ('#') слайдер я считаю)

Answer 2

jsfiddle

$(document).ready(function() { 
var slider = $('.bxslider').bxSlider({ 
    pagerCustom: '#navi' 
}); 

$('#menu-btn').click(function() { 
    $('#navigation').toggleClass('visible'); 
    $('#navigation').toggleClass('hidden'); 
    $('#slider').toggleClass('resized'); 
    $('#slider').toggleClass('full'); 
    $('#navigation').one('webkitTransitionEnd otransitionend oTransitionEnd msTransitionEnd transitionend', 
     function(e) { slider.redrawSlider(); 
    }); 
}); 

});

Answer 3

Спасибо за jsfiddle.

Я не думаю, что вы можете это сделать ... Вы смешиваете два разных и независимых понятия: изменение размера JS и переходы CSS.

Возможно, вы можете синхронизировать их (плохо), установив одинаковое время анимации, как время перехода css, но это не похоже на хорошее решение для меня.

Я бы отказался от css-переходов и использовал полное решение JS. Это не будет выглядеть великолепно, если вы измените размер окна вручную, но при этом вы можете получить приятную анимацию изменения размера, когда меню появляется/исчезает ...