根据其字符数褪色DIV

Question

我对jQuery完全陌生，并且试图构建一个在某些DIV之间淡入淡出的非常简单的内容滑块。每个转换/淡入的持续时间应取决于单个DIV内的字符数量。

我目前的代码看起来是对字符进行计数并调整了setTimeout函数，但它对于下一个div，而不是对其进行计算。

对于无知，感到抱歉。任何帮助将非常感激。

$(document).ready(function() { 
    var allBoxes = $("div.boxes").children("div"); 
    transitionBox(null, allBoxes.first()); 
}); 

function transitionBox(from, to) { 
    function next() { 
    var nextTo; 
    // here i am getting the length of the div 
    var dur = $(this).text().length * 10; 
    if (to.is(":last-child")) { 
     nextTo = to.closest(".boxes").children("div").first(); 
    } else { 
    nextTo = to.next(); 
    } 
    to.fadeIn(500, function() { 
     setTimeout(function() { 
     transitionBox(to, nextTo); 
     // adding the length here delays the next slide, not the one i counted the characters in 
     }, dur); 
    }); 
    } 

    if (from) { 
    from.fadeOut(500, next); 
    } else { 
    next(); 
    } 
} 

这里的一对JSFiddle

Answer 1

你的问题，一切都在下面一行：

var dur = $(this).text().length * 10; 

不能使用$(this)这里，而是使用to变量，因为this是window对象在你的情况。这里有一篇关于this在JavaScript中的好文章http://javascriptissexy.com/understand-javascripts-this-with-clarity-and-master-it/