【问题标题】:Jquery slider: smooth click animationJquery滑块:平滑点击动画
【发布时间】:2010-01-12 18:48:52
【问题描述】:

jquery 滑块包含一个“动画”选项,当设置为“true”时,单击滑块栏时会将手柄滑入位置。

我正在使用我的滑块滚动另一个 div 中的内容,创建与苹果网站上类似的效果。 http://www.apple.com/mac/

问题是,当我单击滑块时,它会平滑地为手柄设置动画,而不是其他 div。我让另一个 div 在“幻灯片”和“更改”事件上滚动。有什么想法可以实现其他 div 的平滑滚动吗?

提前感谢,jQuery 之神。

我的代码:

var list = $('.sliderGallery ul');

$('.slider').slider({
    min:0,
    max:1500,
    animate: true,
    slide: function(event, ui) { list.css('left', '-' + ui.value + 'px'); },
    change: function(event, ui) { list.css('left', '-' + ui.value + 'px'); }
});

【问题讨论】:

    标签: javascript jquery jquery-ui


    【解决方案1】:

    自从我使用 JavaScript 已经有一段时间了,但据我记得 jQuery,你可以尝试做你已经在做的同样的事情,但使用动画效果。试试这个:

    var list = $('.sliderGallery ul');
    
    $('.slider').slider({
        min:0,
        max:1500,
        animate: true,
        slide: function(event, ui) { list.animate({'left': '-' + ui.value + 'px'}, 'normal'); },
        change: function(event, ui) { list.animate({'left': '-' + ui.value + 'px'}, 'normal'); }
    });
    

    此代码可能无法立即运行,但希望它可以作为一个起点。这是此函数文档的链接:animate( params, [duration], [easing], [callback] ) in Effects/animate

    【讨论】:

    • 嘿,佩德!我可以多看看它,希望能提出一个可行的解决方案,但我严重缺乏测试环境。您是否介意在您的问题中添加一个您想要实现的简单实现,这将有同样的问题,即不够流畅。如果帮助您不需要额外的努力来构建沙盒,那么帮助您会容易得多(而且我敢肯定,不仅仅是对我而言)。
    猜你喜欢
    • 1970-01-01
    • 2017-02-01
    • 2012-02-19
    • 1970-01-01
    • 1970-01-01
    • 2013-10-08
    • 1970-01-01
    • 2012-06-21
    • 2017-05-23
    相关资源
    最近更新 更多