Jquery滑块:平滑点击动画

时间:2010-01-12 18:48:52

标签: javascript jquery jquery-ui

jquery滑块包含一个“animate”opton,当设置为“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'); }
});

1 个答案:

答案 0 :(得分: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