问题描述
我在简单地运行动画的打开/关闭功能上遇到了问题.
I am having problem with a open/close function which simply runs an animation.
在这里查看我的小提琴 http://jsfiddle.net/motocomdigital/X34XJ/7/
See my fiddle here http://jsfiddle.net/motocomdigital/X34XJ/7/
正在播放，因为我正在滑块动画中运行此功能.使用bx-slider.
It is playing up because I am running this function inside an slider animation. Using bx-slider.
直到滑块第二次旋转才出现该问题.这是您在小提琴中必须执行的操作才能显示该错误.
The problem does not occur until the second slider rotation. This is what you have to do in the fiddle to get the bug to show.
- 打开小提琴，
- 点击打开面板"
- 关闭面板，
- 导航到下一张幻灯片
- 重复以上相同的步骤(但在一张幻灯片上，使面板保持打开状态并导航到下一页)
- 您会发现回到幻灯片第一页时，如果尝试打开面板，它将打开，然后立即再次关闭.
- 如果再次重复这些步骤，您会注意到面板开始打开，关闭，然后再次打开... aaaahh很奇怪！！！
这是我的代码(尽管查看小提琴会更好)
This is my code (though viewing it the fiddle will be better)
$('#slider1').bxSlider({
auto: false,
speed: 800,
// runs after new slide has loaded
onAfterSlide: function(currentSlideNumber, totalSlideQty, currentSlideHtmlObject) {
var $fadeItems = $('a.openPanel, .panel, span'), // items that fade in
$panel = $(currentSlideHtmlObject).find('.panel'); // current slide panel
$fadeItems.removeAttr('style'); // this removes the inline style on all fadeItems, allowing css display: none; to take affect
$(currentSlideHtmlObject).find($fadeItems).fadeIn(); // current slide fadeIn items fade in
panelOpen = false; // panel state closed
panelAction = function() { // panel slide function
if (panelOpen === true) {
panelOpen = false;
$panel.animate({
left: '-300px'
});
} else {
panelOpen = true;
$panel.animate({
left: '0px'
});
}
};
// panel slide open/close button
$(currentSlideHtmlObject).find('a.openPanel').on('click', function(e) {
e.preventDefault();
panelAction();
});
}
});
如果有人可以帮助我了解我要去哪里出问题，我将非常感激.
If anyone could help me understand where I'm going wrong, I would be so grateful.
谢谢.
推荐答案
在bxslider onAfterSlide回调中绑定click事件时，只需使用off取消绑定
Just unbind using off as you are binding click event in bxslider onAfterSlide callback
$(currentSlideHtmlObject).find('a.openPanel').off('click').on('click', function(e) {
e.preventDefault();
panelAction();
});
但是您的代码在chrome上对我来说充满了错误.
But your code is full of bugs for me on chrome.
请注意，您不应在bxslider onAfterSlide回调函数中绑定事件.
Note that you shouldn't bind events in bxslider onAfterSlide callback functions.
请参见 http://jsfiddle.net/X34XJ/8/
这篇关于滑块中的jQuery打开/关闭功能-第一次工作，但是第二次，运行打开然后关闭的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！