0

如何在鼠标悬停时停止动画并在鼠标悬停时重新启动我尝试了以下代码，但它不起作用：

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/

谢谢，

4

3 回答 3

0

尝试将全局变量放入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-12T08:19:40.333 回答
0

我认为您应该使用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-12T08:19:51.460 回答
0

这将起作用：链接

我做了什么：

改为setTimeout("callticker()",3600)_setTimeout(callticker,3600)

并将变量 timer 更改为超级全局变量，以便函数可以访问它。

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-12T08:20:05.693 回答