1

这是我的代码：

$('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 时它会立即隐藏图像，而不是在变形完成后隐藏它......我尝试了几种解决方案，但到目前为止都没有奏效。任何想法/帮助？提前致谢！

4

1 回答 1

2

您需要使用实例而不是直接传递 morph 函数中的东西，这需要属性来 morph 并且它可能会立即运行您的函数，希望它会返回一个属性值。你可以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
           });
        }   
    });

})();

start 确保它在鼠标悬停时始终可见，链接被取消，这意味着如果您过早将鼠标移出，它将停止执行，如果您执行 mouseout，它将隐藏图像并删除 onComplete 事件，以便如果您再次显示它，当它进入视野时保持可见。

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

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

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

于 2012-05-28T19:01:53.643 回答