为什么我的 mootools 幻灯片实例会阻止执行代码和幻灯片？答案

【问题标题】：Why does my mootools slide instance prevent code, and slides, from being executed?为什么我的 mootools 幻灯片实例会阻止执行代码和幻灯片？
【发布时间】：2012-12-27 13:17:55
【问题描述】：

我正在尝试在 RTE 上使用 mootools 实现一个简单的slideIn()。当 RTE 区域悬停 (mouseenter) 时，它应该滑入，并显示一些额外的选项来编写我确实想在该区域提供的条目。请看下面的链接，应该是不言自明的

所以我的问题是，当我尝试创建 Fx.Slide 实例时，代码没有被执行。我用show方法试了一下，效果很好。

这是jsfiddle 与我的工作代码，不工作的部分被注释掉。

同样，我想要的是在触发mouseenter 事件时滑入buttonbar 元素。这适用于show，但不适用于幻灯片实例。

如果有人能指出我正确的方向，我会很高兴。

如果还有其他问题，请发表评论，如果需要，我会提供更多信息。

这么久，利诺

【问题讨论】：

标签： javascript slider mootools jsfiddle rte

【解决方案1】：

好吧，我刚刚意识到我做错了什么。就是这个小片段：

wrap.grab(buttonbar.hide());

这是垃圾，因为buttonbar 已经不在 DOM 中了。它必须拆分为：

wrap.grab(buttonbar);
buttonbar.slide('hide');

之后，只对事件设置进行了一些更改：

editor.addEvents({
    'click': function(ev) {
        ev.stop();
        buttonbar.show();
    },
    'mouseenter': function(ev) {
        ev.stop();
        this.addClass('mark');
        buttonbar.show();
        //this.slideIn();
    },
    'mouseleave': function(ev) {
        ev.stop();
        //buttonbar.hide();
        this.removeClass('mark');
    }
});

到这里：

editor.addEvents({
    'click': function(ev) {
        ev.stop();
        buttonbar.slide('toggle');
    },
    'mouseenter': function(ev) {
        ev.stop();
        this.addClass('mark');
        buttonbar.slide('in');
    },
    'mouseleave': function(ev) {
        ev.stop();
        this.removeClass('mark');
        buttonbar.slide('out');
    }
});

现在我的幻灯片滑得像地狱一样 :)) 这里是fiddle的链接。

【讨论】：