javascript - 动画不适用于不同的 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");
});