鼠标悬停时暂停动画

发布于 2024-12-29 22:38:52 字数 775 浏览 0 评论 0原文

我制作了一个 jQuery 脚本，它将滚动浏览 UL 列表，问题是如果列表中的当前项目悬停，我希望它暂停动画。

我有一个每秒调用我的股票代码函数的计时器，以及一个用新项目更新列表的更新函数，我没有包含该函数，因为它与动画没有任何关系。

// Initiate a call to ticker every 1second
    var tickerUpdateTimer = setInterval('ticker()', 1000);

股票代码功能使用 jQuery UI 滑动功能

function ticker() {
    if ($('ul#ticker li:first').length == 0)
        tickerUpdate();

        $.when(tickerSlideIn()).then(tickerSlideOut());
}

function tickerSlideIn() {
    $('ul#ticker li:first').show("slide", { direction: "down" }, tickerSpeed).delay(tickerPause);
}

function tickerSlideOut() {
    $('ul#ticker li:first').hide("slide", { direction: "up" }, tickerSpeed, function() {$(this).remove();});
}

我希望有人可以帮助我重写我的函数以在悬停/鼠标悬停时暂停，谢谢。

原文

I've made a jQuery script that will scroll through a UL list, the problem is that I would like it to pause the animation if the current item in the list is hovered.

I have a timer that calls my ticker function every second, and an update function that updates the list with new items, I havn't included that one as it doesn't have anything to do with the animation.

// Initiate a call to ticker every 1second
    var tickerUpdateTimer = setInterval('ticker()', 1000);

The ticker functions use the jQuery UI slide function

function ticker() {
    if ($('ul#ticker li:first').length == 0)
        tickerUpdate();

        $.when(tickerSlideIn()).then(tickerSlideOut());
}

function tickerSlideIn() {
    $('ul#ticker li:first').show("slide", { direction: "down" }, tickerSpeed).delay(tickerPause);
}

function tickerSlideOut() {
    $('ul#ticker li:first').hide("slide", { direction: "up" }, tickerSpeed, function() {$(this).remove();});
}

I hope that someone can help me rewrite my functions to pause on hover/mouseover, thanks.

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

如果没结果 2025-01-05 22:38:52

你可以在没有任何插件的情况下做到这一点：

 var tickerUpdateTimer = setInterval('ticker()', 1000), paused = false;

 $('ul#ticker').hover(function(){ paused = true; }, 
                      function(){ paused = false; }); 

 function ticker() {

    if (paused) return;

    if ($('ul#ticker li:first').length == 0)
        tickerUpdate();

        $.when(tickerSlideIn()).then(tickerSlideOut());
 }

You can do it without any plugin:

 var tickerUpdateTimer = setInterval('ticker()', 1000), paused = false;

 $('ul#ticker').hover(function(){ paused = true; }, 
                      function(){ paused = false; }); 

 function ticker() {

    if (paused) return;

    if ($('ul#ticker li:first').length == 0)
        tickerUpdate();

        $.when(tickerSlideIn()).then(tickerSlideOut());
 }

回复收藏 0 原文

~没有更多了~