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和模块的加载方式（我现在觉得很头疼）。

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

我不知道是否足够让您的样本完全正常工作，但匹配模块绝对是您的直接问题。

Dojo淡化动画不起作用

1 个答案: