好吧，我今天一直在尝试在这里学习 Dojo，但我似乎无法弄清楚为什么我的元素无法淡化。我在这里所做的是从 json 对象加载一组图像并将它们放入 DOM 中。然后，我想使用数组和 shift 方法一次将它们淡入一个。这是我用 jQuery 编写的一个工作插件，用作 Dojo 的速成课程。奇怪的是我根本无法让淡入淡出动画工作，即使我剥离了数组并尝试定位单个 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 的 AMD 和模块的加载方式有关（此时我觉得很头疼）。