Javascript bxslider单击时更改宽度

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

我通过销毁并重新加载滑块解决了这个问题。我需要等到css转换完成，否则它不会工作，但现在看起来很奇怪。我的问题还有别的解决办法吗

编辑：我也希望它看起来像当你调整与响应滑块窗口。所以没有跳跃过渡

---

谢谢你的帮助

JSFiddle不会为我加载atm，但我认为这应该可以完成这项工作：

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

只需在正在设置动画的DOM对象上运行.on（“…”）事件侦听器（在您的例子中，我相信它是$（“#slider”）

---

}))

谢谢你的邀请

我认为你做不到。。。您混合了两个不同且独立的概念：JS大小调整和CSS转换

通过设置与css转换时间相同的动画时间，可以实现它们的同步（效果很差），但对我来说，这听起来不是一个好的解决方案

---

我会放弃css转换，使用完整的JS解决方案。当您手动调整窗口大小时，这看起来不是很好，但当菜单出现/消失时，您可能会得到一个很好的调整大小动画…

一句话/注释：使用英语单词作为函数名、类总是很有用的，这将使非德语使用者理解并帮助您处理代码。一个实例可能也很有用。试着为我们做一个JSFIDLE，你的问题不那么容易理解…@kartsims你可以使用这么多功能，“运行代码片段”-整页OK更改是否希望更好地理解现在我已经尝试了这个解决方案，但它对我不起作用，因为bxslider不会改变。我能想象的最好的黑客：在更高的分辨率上不是完美的，但给出了需要做什么的想法。不幸的是，bfslider支持不够好，像你这样的案例是的，我知道这是非常棘手的！我可以想象一个解决方案是使用处理bxslider响应部分的函数！但是我不知道如何才能做到这一点，我希望您能改进代码，但是当滑块调整大小时，它看起来仍然非常不稳定。它应该改变它的大小，就像你调整窗口大小时它的变化一样（响应性）是的，我知道！我想在调整窗口大小时，我更喜欢好看的外观，而忽略滑块库问题。当然，我同意这一点

 $(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);

 });

});

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

 $(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();
     });
 });