【问题标题】:Jquery animate right page width issueJquery动画右页宽度问题
【发布时间】:2015-04-10 18:37:58
【问题描述】:

我创建了一个浮动在右侧页面上的按钮。

在选择时,我已将 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')
        });

    });

【问题讨论】:

    标签: jquery jquery-animate


    【解决方案1】:

    我从 css 中丢失了

    body
    {
    overflow-x: hidden;
    }
    

    【讨论】:

      猜你喜欢
      • 1970-01-01
      • 2011-08-03
      • 1970-01-01
      • 1970-01-01
      • 1970-01-01
      • 1970-01-01
      • 1970-01-01
      • 1970-01-01
      • 2021-11-16
      相关资源
      最近更新 更多