일부 SVG 요소를 반복합니다.

Question

Raphaël.js의 일부 아이콘이 있습니다. 페이지로드시 순차적으로 페이드하고 싶습니다. 여기

나는 아이콘 구축 :

I 스크립트의 끝에서했던 것과 같은 시간에 모든 아이콘을 페이드보다는

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

    } 
} 

, 어떻게 내가 루프 그들을 통해를하고 퇴색 각각 하나 하나씩, 약간의 지연이있을 때마다?

Answer 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(); 
}