如何使用JQuery - Newby在分区中增加宽度
如何使用JQuery - Newby在分区中增加宽度
提问于 2015-11-06 00:32:53
当用户鼠标进入.container时，我试着让#facial滑到左边，暂停一下，然后增加它的宽度以填充它的容器的宽度。
现在，#面部幻灯片正确，但当我试图让#面部填充整个宽度，它会弹出它的容器。另外，我想让它暂停一会儿，以显示从进入中间到增加宽度的过渡速度慢一些。
这是我的密码。
$( document ).ready(function() {
$('.container').mouseenter(function(){
// When mouse enters the .container, #facial slides to center of .container.
$('#facial').animate({right: '122px'});
// #facial expands it's width to fit .container.
$('#facial').width(400);
});
});回答 3
Stack Overflow用户
回答已采纳
发布于 2015-11-06 00:57:02
更改为使用百分比并使用绝对定位。
https://jsfiddle.net/sy4pv8z3/
Javascript:
$( document ).ready(function() {
$('.container').mouseenter(function(){
// When mouse enters the .container, #facial slides to center of .container.
$('#facial').animate({right: '25%'})
.delay(500)
.animate({right: 0, width: '100%'});
});
});CSS:
body {
background-color:#d6d6d6;
}
.container {
position: relative;
margin: 200px auto;
background-color:red;
width:478px;
height:200px;
}
img {
float:left;
width:239px;
height:200px;
}
#facial {
position:absolute;
right: 0;
width:239px;
height:200px;
background-color:#008aaf;
}
#facial h1, #facial h2 {
text-align:center;
margin-top:30px;
color:#FFFFFF;
}Stack Overflow用户
发布于 2015-11-06 00:47:53
$(document).ready(function() {
$('.container').mouseenter(function() {
// When mouse enters the .container, #facial slides to center of .container.
$('#facial').animate({
right: '122px',
position: 'absolute'
}).delay(500).animate({
right: '0px',
width: '478px'
});
// #facial expands it's width to fit .container.
$('#facial').width(250); // .width(400) causes it to pop-out
});
});body {
background-color: #d6d6d6;
}
.container {
margin: 200px auto;
background-color: red;
width: 478px;
height: 200px;
}
img {
float: left;
width: 239px;
height: 200px;
}
.image {
position: absolute;
}
#facial {
position: relative;
float: right;
width: 239px;
height: 200px;
background-color: #008aaf;
}
#facial h1,
#facial h2 {
text-align: center;
margin-top: 30px;
color: #FFFFFF;
}<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="container">
<div class="image">
<img src="http://s23.postimg.org/enn2yyh7v/Facial.jpg" alt="Facial - Marketing Material" />
</div>
<div id="facial">
<h1>Facial</h1>
<h2>Marketing Material</h2>
</div>
</div>
Stack Overflow用户
发布于 2015-11-06 00:42:51
$('#facial').animate({right: '122px'}).delay(1000).animate({width: '400px'});
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/33557433
复制相关文章
相似问题
腾讯云开发者
