bxslider更改宽度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不会为我加载ATM机，但我认为这应该可以完成以下工作：

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

只需运行.on('...')DOM对象上的事件侦听器(在你的例子中是$('#slider')，我相信)

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解决方案。当你手动调整窗口大小时，这看起来不会很好，但当菜单出现/消失时，你可能会得到一个很好的调整大小的动画。