Jquery 动画右侧页面宽度问题
Jquery animate right page width issue
我创建了一个浮动在右侧页面上的按钮。
在选择时,我已将 div.enquiry-box 动画化到左侧。选择关闭将向右移动。
我制作了合适的 jfiddle - http://jsfiddle.net/6j0mptsp/
我遇到的问题是 div 位于按钮右侧(等待单击 btn-make 使其滑入到位)。 div 确实位于右侧,但页面宽度增加,可以滚动查看那里的查询框。
解决这个问题的最佳方法是什么?
html
<div class="slide-box">
<a href="#" class="btn-make">
<img src="images/btn-side-newsletter.png" alt="Newsletter signup" /></a>
<div class="enquiry-box show">
<h2>Receive Newsletter</h2>
<p>Enter your email address below to receive the Wesport Newsletter</p>
<div class="row">
<input id="side-email" name="side-email" class="side-email" />
</div>
<div class="row">
<a href="#"><img src="images/btn-side-send.png" alt="send" /></a>
<a class="slide-close" href="#"><img src="images/btn-flyout-close.png" alt="close" /></a>
</div>
</div>
</div>
jquery
$(document).ready(function() {
$(".btn-make").click(function(event) {
event.preventDefault();
if ($(".enquiry-box").hasClass('show')) {
$(".enquiry-box").animate({
right: "+39"
}, 700, function() {
// Animation complete.
});
}
$(".enquiry-box").removeClass('show')
});
$(".slide-close").click(function(event) {
event.preventDefault();
$(".enquiry-box").animate({
right: "-252"
}, 700, function() {
// Animation complete.
});
$(".enquiry-box").addClass('show')
});
});
我在 css
中失踪了
body
{
overflow-x: hidden;
}
哦
我创建了一个浮动在右侧页面上的按钮。
在选择时,我已将 div.enquiry-box 动画化到左侧。选择关闭将向右移动。
我制作了合适的 jfiddle - http://jsfiddle.net/6j0mptsp/
我遇到的问题是 div 位于按钮右侧(等待单击 btn-make 使其滑入到位)。 div 确实位于右侧,但页面宽度增加,可以滚动查看那里的查询框。
解决这个问题的最佳方法是什么? html
<div class="slide-box">
<a href="#" class="btn-make">
<img src="images/btn-side-newsletter.png" alt="Newsletter signup" /></a>
<div class="enquiry-box show">
<h2>Receive Newsletter</h2>
<p>Enter your email address below to receive the Wesport Newsletter</p>
<div class="row">
<input id="side-email" name="side-email" class="side-email" />
</div>
<div class="row">
<a href="#"><img src="images/btn-side-send.png" alt="send" /></a>
<a class="slide-close" href="#"><img src="images/btn-flyout-close.png" alt="close" /></a>
</div>
</div>
</div>
jquery
$(document).ready(function() {
$(".btn-make").click(function(event) {
event.preventDefault();
if ($(".enquiry-box").hasClass('show')) {
$(".enquiry-box").animate({
right: "+39"
}, 700, function() {
// Animation complete.
});
}
$(".enquiry-box").removeClass('show')
});
$(".slide-close").click(function(event) {
event.preventDefault();
$(".enquiry-box").animate({
right: "-252"
}, 700, function() {
// Animation complete.
});
$(".enquiry-box").addClass('show')
});
});
我在 css
中失踪了body
{
overflow-x: hidden;
}
哦