Mootools 1.4.3 Hintergrund Fade Effect

Question

Also habe ich Code, um den Hintergrund zu tauschen, das Problem, das ich habe, ist mit dem Fade-Effekt in es integriert. Ich habe es schon eine Weile durcheinander gebracht und ich bin nur frustriert. Also ist der Code da, sieh dir an wie du das hacken kannst um zu arbeiten.

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

Ich denke, dass "Tweens" Effekte nicht mit "background-image" arbeiten, sondern arbeiten mit "background-color" würde ich auf diese Weise versuchen:

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] 
      } 
    }); 

});