時間翻轉jQuery

Question

我想在此代碼中添加fadeTo()函數，因此翻轉不是即時的。

// JavaScript Document 

function initRollovers() { 
if (!document.getElementById) return 

var aPreLoad = new Array(); 
var sTempSrc; 
var aImages = document.getElementsByTagName('img'); 

for (var i = 0; i < aImages.length; i++) {  
    if (aImages[i].className == 'imgover') { 
     var src = aImages[i].getAttribute('src'); 
     var ftype = src.substring(src.lastIndexOf('.'), src.length); 
     var hsrc = src.replace(ftype, '_o'+ftype); 

     aImages[i].setAttribute('hsrc', hsrc); 

     aPreLoad[i] = new Image(); 
     aPreLoad[i].src = hsrc; 

     aImages[i].onmouseover = function() { 
      sTempSrc = this.getAttribute('src'); 
      this.setAttribute('src', this.getAttribute('hsrc')); 
     } 

     aImages[i].onmouseout = function() { 
      if (!sTempSrc) sTempSrc = this.getAttribute('src').replace('_o'+ftype, ftype); 
      this.setAttribute('src', sTempSrc); 
     } 
    } 
} 
} 

window.onload = initRollovers; 

Answer 1

試試這個：

// JavaScript Document 
$(window).ready(function() { 
initRollovers(); 
}) 

function initRollovers() { 
if (!document.getElementById) return 

var aPreLoad = new Array(); 
var sTempSrc; 
var aImages = document.getElementsByTagName('img'); 

for (var i = 0; i < aImages.length; i++) { 
    if (aImages[i].className == 'imgover') { 
     var src = aImages[i].getAttribute('src'); 
     var ftype = src.substring(src.lastIndexOf('.'), src.length); 
     var hsrc = src.replace(ftype, '_o' + ftype); 

     aImages[i].setAttribute('hsrc', hsrc); 

     aPreLoad[i] = new Image(); 
     aPreLoad[i].src = hsrc; 

     $(aImages[i]).mouseenter(function() { 
      sTempSrc = this.getAttribute('src'); 
      sCurrent = this; 
      $(sCurrent).fadeOut(function() { 
       this.setAttribute('src', this.getAttribute('hsrc')); 
       $(sCurrent).fadeIn(); 
      }); 

     }) 

     $(aImages[i]).mouseleave(function() { 
      $(sCurrent).fadeOut(function() { 
       if (!sTempSrc) sTempSrc = this.getAttribute('src').replace('_o' + ftype, ftype); 
       this.setAttribute('src', sTempSrc); 
       $(sCurrent).fadeIn(); 
      }) 


     }) 
    } 
} 
}