Question

我有一个基于6张幻灯片创建的jQuery滑块。最初打开时，一个滑块图像以50％打开，另外5个以容器宽度的10％打开（因为它将是一个响应式网站）

然后我有jQuery来制作任何一个项目悬停在更改为50％宽度而其余项目降至10％，麻烦的是当鼠标悬停在它上面时它会下降到一个新行（超过100％）一件物品。

我该如何阻止这种情况发生？它需要在幻灯片之间无缝转移并填充整个容器，我的代码在下面，您可以看到工作示例here jsFiddle Link 此处

的jQuery

jQuery(".inside").mouseout(function() {  

jQuery('.inside').animate( {width: '10%'}, { duration: 1000, queue: false,  });
jQuery('#one').animate({width: '50%'}, { duration: 1000, queue: false });

});

jQuery(".inside").mouseover(function() { 


jQuery(".inside").animate({width: '10%'}, { duration: 1000, queue: false });
jQuery(this).animate( {width: '50%'}, { duration: 1000, queue: false, });

});

HTML

    <div id="slide-show-holder">

<div id="container">

<div class="inside" id="one"></div>
<div class="inside" id="two"></div>
<div class="inside" id="three"></div>
<div class="inside" id="four"></div>
<div class="inside" id="five"></div>
<div class="inside" id="six"></div>

</div>

</div>

CSS

/* SLIDESHOW STYLES ================================================== */

#container              { width: 100%; height: 300px; cursor: pointer; margin: auto;    }
#container .inside      { width: 10%; display: inline; float: left; height: 330px; position: relative;  }
#container  #one        { background: url('http://stafford.networkintellect4.info/wp-content/themes/stafford/images/business-loans-for-women.jpg'); width: 50%;         }
#container  #two        { background: url('http://stafford.networkintellect4.info/wp-content/themes/stafford/images/business-man-and-woman.jpeg');  }
#container  #three      { background: url('http://stafford.networkintellect4.info/wp-content/themes/stafford/images/303961321.jpeg');   }
#container  #four       { background: url('http://stafford.networkintellect4.info/wp-content/themes/stafford/images/general-business-insurance.jpg');   }
#container  #five       { background: url('http://stafford.networkintellect4.info/wp-content/themes/stafford/images/shutterstock_76925098.jpg');    }
#container  #six        { background: url('http://stafford.networkintellect4.info/wp-content/themes/stafford/images/business-plan.jpg');    }


/* END SLIDESHOW STYLES ================================================== */

Answer 1

对我来说，唯一合乎逻辑的解释是，在动画过程中，某些点上所有宽度的总和等于100％以上（舍入错误/特征），因为你使用了％的。

您可以为容器指定fixed with：

http://jsfiddle.net/BjyPH/3/

或将overflow:hidden添加到容器中。顺便说一句，我认为你不需要mouseleave功能。您只能使用mouseenter：

jQuery(".inside").mouseover(function() { 
    $(this).stop(true,true).animate({
        width: "50%"
    }, 500);
    $(this).siblings().stop(true,true).animate({
        width: "10%"
    }, 500);
});

http://jsfiddle.net/BjyPH/2/

这可能是更好的解决方案，尽管由于使用%的动画（见上文），最后一张幻灯片仍有一些闪烁。

编辑：或者您可以使用jQuery 1.7.2：D

http://jsfiddle.net/BjyPH/4/

Answer 2

更改此项（更改宽度：90％;在#container中）

#container {
    cursor: pointer;
    height: 300px;
    margin: auto;
    width: 90%;
}

我看到它已经在mozilla firefox中解决了

jQuery Slider下降到新线

2 个答案: