Question

我有一个带有Fx.styles效果的div元素

鼠标悬停时

：宽度为300px

和mouseleave：此宽度为100px。

现在，当我进行鼠标悬停时，宽度从200px到300px，

但是当宽度达到250px时，我会做mouseleave，我认为宽度将从250px到100px。

我的想法是错误的，宽度从200px到300px再回到100px。

我的想法如何变为现实：D

    <div id="element" style="width:200px;">
        Content content content
    </div>
    <script>
    var myEffects = new Fx.Styles('element',{
                unit: 'px',
                duration: 400,
                });

        $('element').addEvents({
            'mouseover' : function(e){
                new Event(e).stop();
                myEffects.start({
                    'width': 300
                });
            },
            'mouseleave' : function(e){
                new Event(e).stop();
                myEffects.start({
                    'width': 100
                });
            }

        });
</script>

Answer 1

在1.2+中你可以将"link": "cancel"传递给Fx实例，它会起作用。在1.11中不是这样 - 但你可以在实例上应用.stop（）：

http://www.jsfiddle.net/zbKLj/

var myEffects = new Fx.Styles('element', {
    unit: 'px',
    duration: 400
});

$('element').addEvents({
    'mouseenter': function(e) {
        myEffects.stop().start({
            'width': 300
        });
    },
    'mouseleave': function(e) {
        myEffects.stop().start({
            'width': 200
        });
    }

});

请注意，您应该使用mousenter / mouseleave或mouseover / mouseout而不要混淆它们。实际上，只是忘记了mouseover / mouseout对，因为当容器元素有子元素时它们会错误地在IE中冒泡（它会在子元素上面时触发鼠标）。

此外，选项对象上的尾随逗号将触发IE错误，我希望这仅仅是为了示例：）

Answer 2

1.11有'wait'选项，可以是true或false。请升级： - ）

mootool 1.1如何在做另一个事件时停止事件

2 个答案: