动画不能与不同的HTML标记一起工作

Animation not working with different HTML markup

本文关键字：一起 工作 HTML 不能 动画      更新时间：2023-09-26

我有一个正在工作的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");
    }
);

你的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");
});
相关文章：