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)

また、変数タイマーをスーパーグローバルに変更して、関数からアクセスできるようにしました。

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 に答える