jquery UI滑块移动多个div

Question

嘿我想使用jquery UI在我的页面上有一个滑块，可以移动多个不同距离的div。

所以基本上你拉滑块，div1向左移动10px，div2向左移动20px。

我在这里查看了jquery UI滑块http://jqueryui.com/demos/slider/#side-scroll，但我无法弄清楚如何让滑块移动多个div。

帮助将非常感激。我对jquery很新，但我很享受学习经验=]

Answer 1

您可以使用.slide（）事件，不是吗？ http://jqueryui.com/demos/slider/#event-slide

这样你就可以按照自己的意愿调整div。我会写一个小例子

举了一个小例子： http://labs.joggink.be/slider-multiple-divs/

滑块调整了3个像这样的div（它是非常基本且难看的）：

        $("#slider").slider(
            {
                        value:100,
                        min: 10,
                        max: 250,
                        step: 10,
                        slide: function(event, ui) {
                            $('#div-1').css({
                                width : ui.value + 'px',
                                height: ui.value + 'px'
                            });
                            $('#div-2').css({
                                width : ui.value + 10 + 'px',
                                height: ui.value + 10 + 'px'
                            });
                            $('#div-3').css({
                                width : ui.value + 20 + 'px',
                                height: ui.value + 20 + 'px'
                            });
                        }
            });
    });