Javascript 使用jquery动画时停止换行

我把小提琴摆好了：

正如您可以看到的，当幻灯片菜单被关闭时，内容会随着菜单的收缩而包装。我只是想让它干净地从屏幕一侧滑开

这是我的JS：

$(document).ready(function() {

      var menuBtn = $('.video-search-button'),
             menu = $('.video-search-menu'),
            close = $('.video-search-menu .close');

      menuBtn.click(function(){
          menu.animate({width: 'toggle'});
      });

      close.click(function(){
         menu.animate({width: 'toggle'});
      });

});

我的SCS：

.video-search-menu {
display: none;
position: fixed;
top: 0;
right: 0;
width: auto;
height: 100%;
overflow: hidden;
background: #24637e;
background: rgba(36, 99, 126, 0.9);
color: #fff;
z-index: 101;

&-wrapper {
    position: relative;
    padding: 180px 50px 0 50px;
}

.close {
    position: absolute;
    width: 40px;
    height: 40px;
    top: 15px;
    left: 15px;
    z-index: 9999;
    cursor: pointer;

    &:before, &:after {
        content: '';
        position: absolute;
        width: 100%;
        top: 50%;
        height: 2px;
        background: #ffffff;
        transform: rotate(45deg);
    }

    &:after {
        transform: rotate(-45deg);
    }
}
}

添加CSS规则

p{
    overflow: hidden;
    white-space: nowrap;
}

添加CSS规则

p{
    overflow: hidden;
    white-space: nowrap;
}

---

我更新了您的 或复制以下代码：

$(document).ready(function() {

          var menuBtn = $('.video-search-button'),
                 menu = $('.video-search-menu'),
                close = $('.video-search-menu .close');

                    var right = (1 - menu.width()) - 1;
                menu.css('right', right);

          menuBtn.click(function(){
              menu.animate({right: 0}).show();
          });

          close.click(function(){
             menu.animate({right: right});
          });

});

$(document).ready(function() {

          var menuBtn = $('.video-search-button'),
                 menu = $('.video-search-menu'),
                close = $('.video-search-menu .close');

                    var right = (1 - menu.width()) - 1;
                menu.css('right', right);

          menuBtn.click(function(){
              if(menu.is(':visible')) {
                close.trigger('click');
              }
              else {
                menu.animate({right: 0}).show();
              }
          });

          close.click(function(){
             menu.animate({right: right}, function() {
                menu.hide();
             });
          });

});

更新：再次单击按钮时关闭菜单

或复制以下代码：

$(document).ready(function() {

          var menuBtn = $('.video-search-button'),
                 menu = $('.video-search-menu'),
                close = $('.video-search-menu .close');

                    var right = (1 - menu.width()) - 1;
                menu.css('right', right);

          menuBtn.click(function(){
              menu.animate({right: 0}).show();
          });

          close.click(function(){
             menu.animate({right: right});
          });

});

$(document).ready(function() {

          var menuBtn = $('.video-search-button'),
                 menu = $('.video-search-menu'),
                close = $('.video-search-menu .close');

                    var right = (1 - menu.width()) - 1;
                menu.css('right', right);

          menuBtn.click(function(){
              if(menu.is(':visible')) {
                close.trigger('click');
              }
              else {
                menu.animate({right: 0}).show();
              }
          });

          close.click(function(){
             menu.animate({right: right}, function() {
                menu.hide();
             });
          });

});

更新2: 您还可以为关闭“图标”保存一些代码行：

---

我更新了您的 或复制以下代码：

$(document).ready(function() {

          var menuBtn = $('.video-search-button'),
                 menu = $('.video-search-menu'),
                close = $('.video-search-menu .close');

                    var right = (1 - menu.width()) - 1;
                menu.css('right', right);

          menuBtn.click(function(){
              menu.animate({right: 0}).show();
          });

          close.click(function(){
             menu.animate({right: right});
          });

});

$(document).ready(function() {

          var menuBtn = $('.video-search-button'),
                 menu = $('.video-search-menu'),
                close = $('.video-search-menu .close');

                    var right = (1 - menu.width()) - 1;
                menu.css('right', right);

          menuBtn.click(function(){
              if(menu.is(':visible')) {
                close.trigger('click');
              }
              else {
                menu.animate({right: 0}).show();
              }
          });

          close.click(function(){
             menu.animate({right: right}, function() {
                menu.hide();
             });
          });

});

更新：再次单击按钮时关闭菜单

或复制以下代码：

$(document).ready(function() {

          var menuBtn = $('.video-search-button'),
                 menu = $('.video-search-menu'),
                close = $('.video-search-menu .close');

                    var right = (1 - menu.width()) - 1;
                menu.css('right', right);

          menuBtn.click(function(){
              menu.animate({right: 0}).show();
          });

          close.click(function(){
             menu.animate({right: right});
          });

});

$(document).ready(function() {

          var menuBtn = $('.video-search-button'),
                 menu = $('.video-search-menu'),
                close = $('.video-search-menu .close');

                    var right = (1 - menu.width()) - 1;
                menu.css('right', right);

          menuBtn.click(function(){
              if(menu.is(':visible')) {
                close.trigger('click');
              }
              else {
                menu.animate({right: 0}).show();
              }
          });

          close.click(function(){
             menu.animate({right: right}, function() {
                menu.hide();
             });
          });

});

更新2: 您还可以为关闭“图标”保存一些代码行：

---

这很好，但是如果菜单已经打开，再次单击按钮是否也会关闭菜单？这很好，但是如果菜单已经打开，再次单击按钮是否也会关闭菜单？