javascript - jQuery幻灯片切换:带有面板的滑动按钮

我正在使用jquery幻灯片选项卡，并且在单击按钮时可以正常工作。但是我希望该按钮与面板缝合，并且也应与面板一起滑动。当前按钮已修复，面板正常工作。

这是FIDDLE

的HTML

    <button id="showmenu" type="button" class="feed_btn">Feed Back</button>
<div class="sidebarmenu">
                  <div class="slide-out-div" style="z-index: 999;">
                      <form  class="generalForm bookingForm" action="#" method="post">
                    <div class="row">
                        <div class="col-sm-12">
                            <label>Name<span>*</span></label>
                            <input type="text" name="Name" class="required" />
                        </div>
                        <div class="col-sm-12 mar_top">
                            <label>Email <span>*</span></label>
                            <input type="text" name="Email" class="required" />

                        </div>
                        <div class="col-sm-12 mar_top">
                            <label>Contact No <span>*</span></label>
                            <input type="text" name="contact_no" class="required" />
                        </div>
                        <div class="col-sm-12 mar_top">
                            <label>Say Few Words<span>*</span></label>
                            <input type="text" name="feedback" class="required" />

                        </div>
                        <div class="col-sm-12">
                            <input type="submit" name="submit" value="Submit" style="background-image:none; padding-left:20px;" />
                        </div>
                    </div>
                </form>
                 </div>


            </div>
            </div>

的CSS

    .sidebarmenu{
        position:absolute;
        right:-250px;
        z-index:999999;
    }

JS

    $('#showmenu').click(function() {
        var hidden = $('.sidebarmenu').data('hidden');

        if(hidden){
            $('.sidebarmenu').animate({
                right: '-250px'
            },500)

        } else {
            $('.sidebarmenu').animate({
                right: '0px'
            },500)
        }
        $('.sidebarmenu,.image').data("hidden", !hidden);

        });

最佳答案

由于要将按钮与表单一起移动，因此您需要添加一个父对象并仅将其移动到表单see demo

的HTML

<div class="panel">
    <button id="showmenu" type="button" class="feed_btn">Feed Back</button>
    <div class="sidebarmenu"> -- your code --</div>
</div>

JS

$('#showmenu').click(function () {
    var hidden = $('.sidebarmenu').data('hidden');

    if (hidden) {
        $('.panel').animate({
            marginRight: '-250px'
        }, 500)

    } else {
        $('.panel').animate({
            marginRight: '0px'
        }, 500)
    }
    $('.sidebarmenu,.image').data("hidden", !hidden);

});

关于javascript - jQuery幻灯片切换:带有面板的滑动按钮，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/22221092/