0

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

然后我让 jQuery 使悬停的任何项目变为 50% 宽度，其余项目下降到 10%，问题是当鼠标悬停在项目上时它会下降到新行（超过 100%）。

我怎样才能阻止这种情况发生？它需要在幻灯片之间无缝传输并填充整个容器，我的代码在下面，您可以在此处查看带有 jsFiddle 链接的工作示例

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 ================================================== */
4

2 回答 2

1

对我来说唯一合乎逻辑的解释是，在动画期间，某个点的所有宽度之和大于 100%（舍入错误/功能），因为您使用 %'s。

您可以为容器指定一个固定的：

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/

于 2013-05-01T09:19:55.890 回答
0

改变这个（改变宽度：90%；在 #container 中）

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

我看到它已经在 Mozilla Firefox 中解决了

于 2013-05-01T08:57:34.737 回答