Dojo 페이드 애니메이션이 작동하지 않습니다.

Question

좋아요. 저는 오늘 여기 도조를 배우려고 노력해 왔으며, 왜 내 요소가 희미 해지지 않는지 알 수 없습니다. 내가 여기서하고있는 일은 json 객체의 이미지 집합을로드하여 DOM에 배치하는 것입니다. 그런 다음 배열과 교대 방법을 사용하여 한 번에 하나씩 사라지기를 원합니다. 이것은 jQuery에서 작성한 작업 플러그인이며 Dojo의 크래시 과정으로 사용하고 있습니다. 이상한 점은 배열을 제거하고 단일 DOM 요소를 대상으로하려고해도 페이드 애니메이션을 전혀 사용할 수 없다는 것입니다. 그러나 예제 중 하나 인 here에서 직접 내 웹 페이지에 붙여 넣을 경우 , 그 작동합니다. 여기

코드입니다 :

하지만 난 그게 Dojo의 AMD 뭔가이어야한다 파악 여기에 전체 코드를 덤핑에 대한

define([ 
    "dojo/query", "dojo/dom-class", "dojo/domReady!", "dojo/request", "dojo/json", "dojo/_base/fx", "dojo/on", "dojo/dom-attr", "dojo/dom-style" 
],  
    function(query, domClass, dom, request, fx, on, domAttr){ 

     var images = new Array(); //The array object created from the XML file 
     var cur_first = 0; //Current first image, used as a counter to determine which images should be shown 
     var running = true; //Flag to prevent multiple firings or next/prev 
     var display_num = 4; //Num of images displayed at a time 

     request.get('../../javascript/json/rotator_images.js',{handleAs:'json'}).then(
       function(response){ 
        for(i=0; i < response.images.image.length; i++){ 
         var src = response.images.image[i].src; 
         var title = response.images.image[i].title; 
         var desc = response.images.image[i].desc; 
         var thumb = response.images.image[i].thumb; 
         images[i]={src: src, title: title, desc: desc, thumb: thumb}; 
        } 
        load_images(); 
       } 
      ); 

     function load_images(){ 
      for(i=0; i < images.length; i++){ 
       if(i >= cur_first && i < cur_first+display_num){ 
        dojo.create("div", { 
         innerHTML:"<a class='fancybox' rel='group' href='"+images[i].src+"'><img src='"+images[i].thumb+"' /></a>", 
         className:"r_image", 
         style:{opacity:'0'}, 
         id:"r_image_"+(i+1) 
        },dojo.byId("images_wrap")); 
       } 
      } 
      display_images(); 
     } 

     function remainder(){ 
      //Find the remaining images left at the end inside our display_num control so we can determine when to start back at 0 or jump to the end 
      var flr = Math.floor(images.length/display_num) 
      return images.length - (flr*display_num); 
     }  

     query("#arrow_r").on("click", function(){ 
      if(running == false){ 
       running = true; 
       if(cur_first < images.length - remainder()){ 
        cur_first = cur_first+display_num; 
       }else{ 
        cur_first = 0; 
       } 
       hide_images(); 
      } 
     }) 

     query("#arrow_l").on("click", function(){ 
      if(running == false){ 
       running = true; 
       if(cur_first > 1){ 
        cur_first = cur_first-display_num 
        hide_images(); 
       }else{ 
        cur_first = images.length - remainder(); 
        hide_images(); 
       } 
      } 
     }) 


     function display_images(){ 
      var images_arr = []; 
      dojo.query(".r_image").forEach(function(node) { 
       images_arr.push(node); 
      }); 
      function fadeThemIn(images_arr) { 
       if (images_arr.length > 0) { 
        var currentImg = images_arr.shift(); 
        var fadeArgs = { 
         node: currentImg, 
         duration: 200, 
        }; 
        fx.fadeIn(fadeArgs).play(); 
       }else{ 
        running = false; 
       } 
      } 
      fadeThemIn(images_arr) 
     } 

    } 
); 

죄송 AMD 모듈 내가이에 두통을 찾을 수있는 (로드되는 방법 포인트).

Answer 1

AMD 의존성 주사로 인해 fx 호출이 실패 할 수 있습니다.

당신이 요구하는지 :

"dojo/query", "dojo/dom-class", "dojo/domReady!", "dojo/request", "dojo/json", "dojo/_base/fx", "dojo/on", "dojo/dom-attr", "dojo/dom-style" 

만에 매핑 :입니다

query, domClass, dom, request, fx, on, domAttr 

, 당신의 query 변수는 dojo/query 모듈을 얻을 것이다, domClass이 dojo/dom-class 주어 얻을 것이다, dom은 얻을 것이다 dojo/domReady!을 입력하면 request은 dojo/request이되고 fx 변수는 dojo/json이됩니다. 모듈이므로 fx.fadeIn이 작동하지 않습니다.

요청하는 모듈과 가져 오는 변수가 하나씩 일치하는지 확인해야합니다. 변수에 매핑하는 것보다 더 많은 모듈을 요청할 수 있지만 그러한 모듈 (예 : dojo/domReady!)이 결국 필요합니다.

define([ 
    // Modules I actually want, and have variables for: 
    "dojo/query", "dojo/dom-class", "dojo/request", "dojo/json", "dojo/_base/fx", "dojo/on", "dojo/dom-attr", "dojo/dom-style", 

    // Modules I want to be loaded, but don't have variables for: 
    "dojo/domReady!"],  
    function(query, domClass, request, JSON, fx, on, domAttr, domStyle) { 

내가 그 샘플이 완전히 작동하게하는 충분한을 수 있습니다 여부를 알 수는 없지만, 모듈을 일치하는 것은 확실히 당신의 즉각적 :

그래서, 당신을 위해 좋은 헤더 수 있습니다 문제.