Question

如何在鼠标悬停时停止动画并在mouseout上重新启动我尝试了以下代码，但它无法正常工作：

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 link http://jsfiddle.net/3Y3qq/

谢谢，

Answer 1

尝试将全局变量放入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);   
    });
});

Answer 2

我认为您应该使用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);   
     });

});

Answer 3

这将有效：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);
    })

});

在mouseover jquery上停止动画

3 个答案: