Dojo淡入淡出的動畫不起作用

Question

好吧我今天一直在試圖學習Dojo，我似乎無法弄清楚爲什麼我不能淡入我的元素。我在這裏做的是從json對象中加載一組圖像並將它們放入DOM中。然後我想用一個數組和移位方法一次一個地淡入淡出。這是我在jQuery中編寫的一個工作插件，我正在使用它作爲Dojo的速成教程。奇怪的是，即使我剝離數組並僅嘗試定位單個DOM元素，但仍然無法使淡出動畫工作，但如果我將其中一個例子here直接粘貼到我的網頁中， 這樣可行。

下面的代碼：

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

    } 
); 

對不起剛剛傾倒整個代碼到這裏，但我想它必須是一些與Dojo的AMD 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) { 

我不知道這是否會足夠得到你的樣品完全工作，但匹配了模塊絕對是您的眼前問題。