停止动画

如何在鼠标悬停时停止动画并重新启动再鼠标移开时我曾尝试下面的代码，但它不工作：停止动画

var containerheight = 0; 
var numbercount = 0; 
var liheight; 
var index = 1; 
function callticker() { 
    jQuery("#news-container1 ul").animate({ 
     "margin-top": (-1) * (liheight * index) 
    } 

    , 2500); 
    if (index != numbercount - 1) { 
     index = index + 1; 
    } 
    else { 
     index = 0; 
    } 
    timer = setTimeout("callticker()", 3600); 
}  
jQuery(document).ready(function() { 
var timer=null; 
jQuery('#news-container1').height("42px"); 
jQuery('#news-container1').css("overflow","hidden"); 
    numbercount = jQuery("#news-container1 ul li").size(); 
    liheight = jQuery("#news-container1 ul li").outerHeight(); 
    containerheight = jQuery("#news-container1 ul li").outerHeight() * numbercount; 
    jQuery("#news-container1 ul").css("height", containerheight); 
    timer = setTimeout("callticker()", 3600); 

jQuery("#news-container1 ul").mouseover(function(){ 
    clearTimeout(timer); 

}).mouseout(function(){ 
    timer = setTimeout("callticker()", 3600); 
}) 

});

的jsfiddle链接http://jsfiddle.net/3Y3qq/

谢谢，

来源

2013-04-12 asifa

小心在jsfiddle上创建一个（非）工作示例？ – silentw

请添加您正在使用的jQuery版本:) – soyuka

这将工作：link

我所做的：

改变setTimeout("callticker()",3600)到setTimeout(callticker,3600)

而改变变量定时器超级全局变量，以便它可以被函数访问。

var containerheight = 0, 
    numbercount = 0, 
    liheight, 
    index = 1, 
    timer = null; 

function callticker() { 
    jQuery("#news-container1 ul").animate({ 
     "margin-top": (-1) * (liheight * index) 
    } 

    , 2500); 
    if (index != numbercount - 1) { 
     index = index + 1; 
    } else { 
     index = 0; 
    } 
    timer = setTimeout(callticker, 3600); 
} 
jQuery(document).ready(function() { 
    jQuery('#news-container1').height("42px"); 
    jQuery('#news-container1').css("overflow", "hidden"); 
    numbercount = jQuery("#news-container1 ul li").size(); 
    liheight = jQuery("#news-container1 ul li").outerHeight(); 
    containerheight = jQuery("#news-container1 ul li").outerHeight() * numbercount; 
    jQuery("#news-container1 ul").css("height", containerheight); 
    timer = setTimeout(callticker, 3600); 

    jQuery("#news-container1 ul").mouseover(function() { 
     clearTimeout(timer); 

    }).mouseout(function() { 
     timer = setTimeout(callticker, 3600); 
    }) 

});

来源

2013-04-12 08:20:05 silentw

试着把全球变量doc ready并通过callticker()：

function callticker(index, liheight, numbercount) { 
    jQuery("#news-container1 ul").animate({ 
     "margin-top": (-1) * (liheight * index) 
    }, 2500); 
    if (index != numbercount - 1) { 
     index = index + 1; 
    } else { 
     index = 0; 
    } 
    timer = setTimeout("callticker()", 3600); 
}  
jQuery(document).ready(function() { 
    var timer=null; 
    var index = 1; 
    var numbercount = jQuery("#news-container1 ul li").size(); 
    var liheight = jQuery("#news-container1 ul li").outerHeight(); 
    var containerheight = jQuery("#news-container1 ul li").outerHeight() * numbercount; 
     timer = setTimeout(function(){ 
        callticker(index, liheight, numbercount); 
       }, 3600); 
    jQuery("#news-container1 ul").css("height", containerheight); 
    jQuery('#news-container1').height("42px"); 
    jQuery('#news-container1').css("overflow","hidden"); 

    jQuery("#news-container1 ul").mouseover(function(){ 
     clearTimeout(timer); 
    }).mouseout(function(){ 
     timer = setTimeout(function(){ 
        callticker(index, liheight, numbercount); 
       }, 3600); 
    }); 
});

来源

2013-04-12 08:19:40 Jai

我认为你应该宁愿使用mouseenter和mouseleave方法：

jQuery(document).ready(function($) { //note the $ 

    $("#news-container1 ul").mouseenter(function(){ 
     clearTimeout(timer); 
     $("#news-container1 ul").stop(); //use this to stop the animation 
    }).mouseleave(function(){ 
     timer = setTimeout("callticker()", 3600); 
    }); 

});

来源

2013-04-12 08:19:51 soyuka

回答

相关问题