根據其字符數褪色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/