【问题标题】:Pause and resume jquery animation?暂停和恢复jquery动画?
【发布时间】:2012-09-08 10:29:24
【问题描述】:

这是一个小提琴:

http://jsfiddle.net/vBt5E/

我想在悬停时暂停和取消暂停无限滚动的 jquery 动画,没有任何奇怪的跳跃。

像这样的html:

<div id="vertical-carousel">
    <div class="imagecolumn">
        <a href="#"><img src="http://placekitten.com/200/120" width="200" height="120"></a>
        <a href="#"><img src="http://placekitten.com/200/100" width="200" height="100"></a>
        <a href="#"><img src="http://placekitten.com/200/80" width="200" height="90"></a>
    </div>
</div>
​

像这样的javascript:

var imageColumn = $('.imagecolumn');

origColumnHeight = imageColumn.height();

$(document).ready(function() {

    var columnDupe = imageColumn.contents()
                                .clone()
                                .addClass('dupe')
                                .appendTo(imageColumn);

    function scrollColumn() {
        imageColumn.css({'top': '0'})
                   .animate({top: -origColumnHeight},15000, 'linear', scrollColumn);

    }

    scrollColumn();
});

我知道以前曾以不同的形式提出过这个问题,但各种答案对我不起作用。我查看了Tobia Conferto's "Pause" plugin,但无法让它工作。同上this one,据说更麻烦。

如果可以的话,请发布一个工作小提琴,它真的很有帮助。谢谢!

【问题讨论】:

  • 你遇到了什么问题?
  • @Brad 在第二句话中...
  • 我知道你想做什么......那部分很清楚。我在问你遇到什么问题。你所说的只是“无法让它工作”,这并不能告诉我们太多。

标签: javascript jquery jquery-animate


【解决方案1】:

使用“暂停”插件,您可以通过以下操作使其工作:

$(".imagecolumn").hover(function() {
  $(this).pause();
}, function() {
  $(this).resume();
});

示例:http://jsfiddle.net/charlescarver/vBt5E/1/

确保在您的页面上包含该插件! https://raw.github.com/tobia/Pause/master/jquery.pause.min.js

附注我更喜欢PlaceDog

【讨论】:

  • 谢谢查理。我发誓这正是我曾经尝试过的。周五晚上 7 点,我想该休息一下了!
猜你喜欢
  • 2011-07-31
  • 2018-04-21
  • 1970-01-01
  • 2012-04-17
  • 2015-07-06
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
  • 2013-10-04
相关资源
最近更新 更多