javascript - bxslider 改变宽度onclick

Question

我的 bxslider 旁边有一个菜单，我可以滑入和滑出。因此我的 slider 将自行调整大小。当我这样做时，bxslider 要么隐藏部分图像，要么显示下一张幻灯片的部分内容。

我通过销毁并重新加载 slider 解决了这个问题。我需要等到 css 转换完成，否则它不起作用，但现在看起来很奇怪。我的问题还有其他解决方案吗？

编辑:我希望它看起来也像您使用响应式 slider 调整窗口大小时的样子。所以没有跳跃过渡。

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 不会为我加载 atm.，但我认为这应该可以完成工作:

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

只需在正在动画的 DOM 对象上运行 .on('...') 事件监听器(在你的情况下它是 $('#slider') 我相信)