jquery滑块图像不会移动到移位答案

【问题标题】：jquery slider image doesnt move to shiftjquery滑块图像不会移动到移位
【发布时间】：2013-09-27 19:36:15
【问题描述】：

我正在使用 jquery 滑块，我想根据滑块的移动方式移动图像，但由于某种原因它不适合我这是代码

   .main{
        background: transparent  url(/img/ads/bootsImg.jpg) no-repeat 20px 30px;;
        width: 300px;
        background-size: 322px;
        font-family: 'Futura-Book';

    }

<div id="background-image-horizontal"></div>

//滑块

$('#background-image-horizontal').slider({
                max: 50,
                min: 10,
                value: 14,
                slide: function(e,ui) {
                    console.log("transparent url(/img/ads/bootsImg.jpg) no-repeat "+ui.value+"px 1px");
                    $('.main').css("background","transparent url(/img/ads/bootsImg.jpg) no-repeat "+ui.value+"px 1px");
                }
            });

在我的控制台中，当我移动滑块时，我看到这种变化，但在我的屏幕上，图像没有移动

transparent url(/img/ads/bootsImg.jpg) no-repeat 28px 1px ?img=bootsImg.jpg&w=300&h=300:330
transparent url(/img/ads/bootsImg.jpg) no-repeat 29px 1px ?img=bootsImg.jpg&w=300&h=300:330
transparent url(/img/ads/bootsImg.jpg) no-repeat 30px 1px ?img=bootsImg.jpg&w=300&h=300:330
transparent url(/img/ads/bootsImg.jpg) no-repeat 31px 1px ?img=bootsImg.jpg&w=300&h=300:330
transparent url(/img/ads/bootsImg.jpg) no-repeat 32px 1px ?img=bootsImg.jpg&w=300&h=300:330
transparent url(/img/ads/bootsImg.jpg) no-repeat 33px 1px ?img=bootsImg.jpg&w=300&h=300:330

【问题讨论】：

问题已修复...但问题未解决
= image ?> bootsImg.jpg...cahnge 有问题
你能在 jsFiddle 中重现这个问题吗？
我在这里所做的只是给您的 div 一个高度（并修改代码以仅更改位置，这无关紧要）：jsfiddle.net/jL3ju

标签： jquery jquery-ui

【解决方案1】：

一个原因可能是你没有提到你的.main 的高度，我相信它是一个div，所以它需要 0 高度。尝试设置一些height。

.main{
        background: transparent  url(/img/ads/bootsImg.jpg) no-repeat 20px 30px;;
        width: 300px;
        height:200px; /*Set some height*/
        background-size: 322px;
        font-family: 'Futura-Book';

    }

Demo

【讨论】：