Javascript Dojo淡入淡出动画不工作

好吧，我今天一直在努力学习Dojo，但我似乎不明白为什么我不能在我的元素中消失。我在这里做的是从json对象加载一组图像，并将它们放入DOM中。然后我想使用数组和shift方法一次淡入一个。这是我在jQuery中编写的一个工作插件，我正在使用它作为Dojo的速成课程。wierd的问题是，我根本无法让淡入淡出动画工作，即使我去掉数组，只尝试以单个DOM元素为目标，但如果我直接将其中一个示例粘贴到我的网页中，那就行了

代码如下：

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/query”、“dojo/dom类”、“dojo/domReady！”、“dojo/request”、“dojo/json”、“dojo/_base/fx”、“dojo/on”、“dojo/dom attr”、“dojo/dom样式”
],      
函数（查询、domClass、dom、请求、fx、on、domAttr）{
var images=new Array（）；//从XML文件创建的数组对象
var cur_first=0；//当前第一个图像，用作计数器以确定应显示哪些图像
var running=true；//用于防止多次触发的标志或next/prev
var display_num=4；//一次显示的图像数
get（'..//javascript/json/rotator_images.js'，{handleAs:'json'}）(
功能（响应）{
对于（i=0；i=cur\u first&&i1）{
cur_first=cur_first-display_num
隐藏图像（）；
}否则{
cur_first=images.length-rements（）；
隐藏图像（）；
}
}
})
函数显示_图像（）{
var图像_arr=[]；
dojo.query（“.r_image”）.forEach（函数（节点）{
图像自动推送（节点）；
});
功能fadeThemIn（图像）{
如果（图像长度>0）{
var currentImg=images_arr.shift（）；
var fadeArgs={
节点：currentImg，
持续时间：200，
};
fx.fadeIn（fadeArgs.play（）；
}否则{
运行=错误；
}
}
fadeThemIn（图像）
}
}
);

---

很抱歉将整个代码转储到这里，但我认为这一定是Dojo的AMD模块加载方式的问题（我觉得这一点很头痛）

您的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/domClass

，

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

---

我不知道这是否足以让您的示例完全正常工作，但匹配模块肯定是您当前的问题。

Ahh这很有意义！我知道这一定和AMD的依赖性有关，因为我几乎用尽了所有其他的可能性。我发现jQuery带来了一些麻烦，但我确实看到了它对于处理大量流量的大规模web应用程序的直接优势。现在让我试着重写标题，看看会发生什么。是的！它起作用了。谢谢你，伙计，也谢谢你帮我澄清这件事。他们真的应该在文档中强调这一必要性，因为对于像我这样喜欢先跳进脑袋的人来说，lol。