動畫不能用不同的HTML標記

Question

我有一個工作的jQueryMobile HTML標記，但是當我嘗試使它與我將使用的不同HTML標記一起工作時，動畫不起作用，我試圖使用不同的jQuery方法&函數使其工作。似乎沒有任何工作。

工作實例http://jsfiddle.net/yVtVe/22/

需要實現同爲http://jsfiddle.net/yVtVE/25/

childrenvar stopAnim = false; 
function animateTitle(scrollingWidth, initialOffset,elem){ 
    if(!stopAnim){ 
    var $a = elem; 
    $a.animate({left: (($a.offset().left == (scrollingWidth + initialOffset))?-initialOffset:("-="+scrollingWidth))}, 
     { 
      duration: 5000, 
      easing: 'swing', 
      complete: function(){ 
       if($a.offset().left < 0){ 
        $(this).css("left", scrollingWidth); 
       }    
       animateTitle(scrollingWidth); 
     }  
    }); 
    } 
} 
$('#swrapper ul li').hover(
    function() { 
     var scrollingWidth = $(this).children('div.list-heading').children('h2').width(); 
     alert(scrollingWidth); 
     var elem = $(this).children('div.list-heading').children('h2'); 
     if(scrollingWidth > 330){ 
     scrollingWidth = scrollingWidth + 10; 
     var initialOffset = $(this).children('div.list-heading').children('h2').offset().left; 
     stopAnim = false; 
     animateTitle(scrollingWidth, initialOffset,elem); 
     } 
    }, 
    function() { 
     stopAnim = true;   
     $(this).children('div.list-heading').children('h2').stop(true, true).css("left", "0"); 
    } 
); 

Answer 1

你在你的JavaScript錯誤：

childrenvar stopAnim = false; 

應該

childrenvar_stopAnim = false; 

個

我已經刪除JS錯誤：http://jsfiddle.net/yVtVE/28/

這是你的小提琴的最後工作版本：

http://jsfiddle.net/yVtVE/54/

我會在這裏發佈工作的js代碼：

var childrenvar, stopAnim = false; 

function animateTitle(scrollingWidth, initialOffset, elem) { 
    if (!stopAnim) { 
     var $a = elem; 
     $a.animate({ 
      left: (($a.offset().left == (scrollingWidth + initialOffset)) ? -initialOffset : ("-=" + scrollingWidth)) 
     }, { 
      duration: 5000, 
      easing: 'swing', 
      complete: function() { 
       if ($a.offset().left < 0) { 
        $(this).css("left", scrollingWidth); 
       } 
       animateTitle(scrollingWidth); 
      } 
     }); 
    } 
} 
$('#swrapper ul li').hover(

function() { 
    var scrollingWidth = $(this).select('div.list-heading').children().select('h2').width(); 
    var elem = $(this).select('div.list-heading').children().select('h2'); 
    if (scrollingWidth > 330) { 
     scrollingWidth = scrollingWidth + 10; 
     var offset = $(this).select('div.list-heading').children().select('h2').offset(); 
     if (offset !== null) { 
      var initialOffset = offset.left; 
      stopAnim = false; 
      animateTitle(scrollingWidth, initialOffset, elem); 
     } 
    } 
}, 

function() { 
    stopAnim = true; 
    $(this).select('div.list-heading').children().select('h2').stop(true, true).css("left", "0"); 
});