Question

这是我的代码：

$('myButton').addEvents({
    mouseenter: function(){
       $('myImage').setStyle('display','block');
       $('myImage').morph({
            'duration': 500,
            'transition': Fx.Transitions.Sine.in,
            'opacity': 1,
            'top': -205
       });
    },
    mouseleave: function(){
       $('myImage').morph({
            'opacity': 0,
            'top': -175,
            'onComplete': hidemyImage
       });
    }   
});

function hidemyImage() {
    $('myImage').setStyle('display','none') 
}

mouseleave 中的 onComplete 无法按预期工作...当我离开myButton而不是在变形完成后隐藏它时，它会立即隐藏图像...我尝试了几种解决方案，但迄今为止都没有。任何想法/帮助？提前谢谢！

Answer 1

你需要使用实例而不是直接传递变形函数中的东西，这会使属性变形，它可能会立即运行你的函数，希望它会返回一个属性值。你可以在此之前做el.set('morph', {onComplete: hideImagefn})它会起作用，但请继续阅读...

这样做的一种方法是设置你的变形选项/实例一次，然后像这样使用它：

(function() {
    var img = document.id('myImage').set('morph', {
        duration: 500,
        transition: Fx.Transitions.Sine.in,
        link: 'cancel',
        onStart: function() {
            this.element.setStyle('display', 'block');
        }
    }), fx = img.get('morph');

    // of you can just do var fx = new Fx.Morph(img, { options});

    document.id('myButton').addEvents({
        mouseenter: function(){
           fx.start({
                opacity: 1,
                top: -205
           });
        },
        mouseleave: function(){
            fx.addEvent('complete', function() {
                this.element.setStyle('display', 'none');
                this.removeEvents('complete');
            }).start({
                opacity: 0,
                top: -175
           });
        }   
    });

})();

启动确保它在鼠标悬停时始终可见，链接是取消，这意味着如果你过早地鼠标停止会停止执行，如果你做鼠标输出，它将隐藏图像并删除onComplete事件，这样如果你显示再一次，当它进入视野时它仍然可见。

如果你不打算把它带回来，你可以更好地清理，甚至可以使用onComplete:once等事件伪 - 虽然那是来自mootools的Event.Pseudos的一部分 - 更多。

一般来说 - .get / .set变形是您的设置。 el.morph()将值传递给morphInstance.start()

在这里玩：http://jsfiddle.net/dimitar/NkNHX/

如何在附加到mouseleave的变形上添加mootools onComplete事件？

1 个答案: