Mootools 1.4.3背景フェード効果

Question

私はバックグラウンドをスワップするコードを持っています。フェード効果を組み込むのが問題です。私はしばらくそれを乱してしまっただけで、私はちょうどイライラしています。コードはそこにあります。どのようにこれを動作させるためにハックすることができます参照してください。

MooToolsは1.4.3

.socialIconsFB { 
    float: right; 
    display: block; 
    margin: -20px 3px; 
    width: 48px; 
    height: 57px; 
    background-image: url(XXXXXX/social_icons/facebook.png); 
} 

<div class="socialIconsFB"></div> 


$$('.socialIconsFB').each(function(socialIconsFB) { 
    socialIconsFB.addEvent('mouseover', function() { 
     this.tween("background-image", "url(XXXXXX/social_icons/facebook.png)", "url(XXXXXX/social_icons/facebook_highlight.png)"); 
    }); 
    socialIconsFB.addEvent('mouseout', function() { 
     this.tween("background-image", "url(XXXXXX/social_icons/facebook.png)"); 
    }); 
}); 

Answer 1

私は、このようにしようと「トゥイーン」の効果は、「背景画像」で動作しますが、「背景色」 では動作しないと思います。

HTML：

<div class="socialIconsFB"> 
    <span></span> 
</div> 

CSS：

.socialIconsFB { 
     float: right; 
     display: block; 
     margin: -20px 3px; 
     width: 48px; 
     height: 57px; 
     background-image: url(XXXXXX/social_icons/facebook.png); 
} 
.socialIconsFB span{ 
    margin:0; padding:0; 
    opacity:0; filter:alpha(opacity=0); 
    width:100%; 
    height:100%; 
    background-image: url(XXXXXX/social_icons/facebook_highlight.png); 
} 

JAVASCRIPT：いずれの場合で

$$('.socialIconsFB').each(function(socialIconsFB) { 
    socialIconsFB.addEvents({ 
     'mouseenter': function(){ 
       this.getChildren('span').tween("opacity", 1); 
       //it could be: this.getChildren('span')[0] 
      }, 

     'mouseleave': function(){ 
       this.getChildren('span').tween("opacity", 0); 
       //it could be: this.getChildren('span')[0] 
      } 
    }); 

});