Question

我有一个正在运行的jQueryMobile HTML标记，但是当我尝试使用我将使用的不同HTML标记时，动画无效，我尝试使用不同的jQuery方法＆amp;功能使它工作。似乎没什么用。

实施相同的内容

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");
});

动画无法使用不同的HTML标记

1 个答案: