2012-08-15 114 views
0

我有一些來自Raphaël.js的圖標,我希望在頁面加載時順序淡入淡出。循環播放一些SVG元素

這裏我建的圖標:

function navBar() { 
    var icon={/* lots of path strings */}, 
    fill = { 
     fill:"#666", 
     stroke:"none", 
     opacity:0 // opacity is initially 0; would like to loop through this 
    }, 
    stroke = { 
     stroke:"#fff", 
     "stroke-width":3, 
     "stroke-linejoin":"round", 
     opacity:0 
    }; 

    for (var name in icon) { 
     var r = Raphael(0, 0, 40, 40), 
      s = r.path(icon[name]).attr(stroke).translate(4, 4), 
      Icon = r.path(icon[name]).attr(fill).translate(4, 4), 
      Path = document.getElementById("path"), 
      none = {fill: "#000", opacity: 0}; 

     (function (icon, path, s, name) { 
      r.rect(0, 0, 38, 38).attr(none).hover(function() { 
       s.stop().animate({opacity: 1}, 200); 
      }, function() { 
       s.stop().attr({opacity: 0}); 
      }); 
     })(Icon, icon[name], s, name); 


     // Here I'm able to fade all of the icons in at the same time 
     (function (icon) {   
      Icon.animate({opacity:1},200); 
     })(Icon); 

    } 
} 

而不是在同一時間消失的所有圖標,因爲我已經在腳本的最後完成,我怎麼能環通過他們和他們褪色每個人都在一個接一個地稍微延遲一段時間?

回答

1

也許你需要在創建opr之後爲它們設置動畫。已經完成了。這裏是一個模擬:http://jsfiddle.net/r75hh/

像這樣左右。

// creating 
var icon = new Raphael ... 
... 
icon.attr("rel", "icon") 

// the last line in navBar() 
animateIcons(); 


// animating 
function animateIcons() { 
    // assuming jQuery in use 
    var icons = $("elementTagNameOfIcon[rel='icon']"); 
    var i = 0; 
    var f = function(){ 
     var icon = icons.get(i); 
     if (icon) { 
      $(icon).animate({opacity:1}, 200, function(){ 
       f(); 
      }); 
      i++; 
     } 
    }; 
    f(); 
}