Question

在下面的代码中，我有一个帖子，并且有一个评论按钮，该按钮会将评论框从右侧滑入视图。我正在将主要post元素的大小从父级的100％调整为父级的67％（col-lg-12到col-lg-8）。尽管我试图使post元素与comment元素的入口同时移动。

在我的小提琴中，我似乎无法解决评论如何在整个post元素中滑动的方式，而不仅仅是其中一部分。另外，尽管滑出动画可以工作，但我无法固定动画仅出现在何处而不是滑入。

This is my JSFiddle

下面的代码片段奇怪地不能像jsfiddle一样起作用。

$('body').on('click', '#comments', function(e) {
  var name = $(this).attr('name');
  var style = $("#comments-body-" + name).prop('class');
  if (style == "col-lg-4 hide") {
    $("#post-card-" + name).prop('class', 'col-lg-8');
    $("#comments-body-" + name).show("slide", {
      direction: "right"
    }, 1000, function() {
      $("#comments-body-" + name).prop('class', 'col-lg-4 show');
    });
  } else if (style == "col-lg-4 show") {
    $("#comments-body-" + name).hide("slide", {
      direction: "right"
    }, 1000, function() {
      $("#post-card-" + name).prop('class', 'col-lg-12');
      $("#comments-body-" + name).prop('class', 'col-lg-4 hide');
    });
  }
});

.quantity {
  border-radius: 100px;
  background: #dc3545;
  color: white;
  padding: 1px 6px;
}

span #comments {
  cursor: pointer;
}

span #comments:hover {
  color: blue;
}

.divider {
  position: relative;
  Float: left;
  height: 100%;
  width: 1px;
  background-color: rgba(0, 0, 0, .125)
}

.comment-body {
  padding: 0.75rem !important;
}

.show {
  display: block;
}

.hide {
  display: none;
}

<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" media="all">
<link href="https://cdnjs.cloudflare.com/ajax/libs/material-design-iconic-font/2.2.0/css/material-design-iconic-font.min.css" rel="stylesheet" media="all">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<link href="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.css" rel="stylesheet" media="all">
<link href="https://nofile.io/f/RA9FgtoD8yG/master.css" rel="stylesheet" media="all">


<body>
  <div id="main-content" class="main-content">
    <div id="notices" class="section__content section__content--p30">
      <div class="container-fluid" id="content">
        <div class="col-md-12">
          <div class="overview-wrap">
            <h2 class="title-1">Notices</h2>
            <button class="au-btn au-btn-icon au-btn--blue" data-toggle="modal" data-target="#newPostModal">
							<i class="zmdi zmdi-plus"></i>new post</button>
          </div><br />
          <div id="$id" class="row">
            <div class="col-lg-12">
              <div class="card">
                <div class="card-header">
                  <div class="row">
                    <div class="col-lg-8">
                      <strong class="card-title">
												yeet
											</strong>
                    </div>
                    <div class="col-lg-4">
                      <span style="cursor:pointer;" class="float-right">
												<a id="remove-notice">
													<i class="fas fa-times"></i>
												</a>
											</span>
                    </div>
                  </div>
                  <div class="row">
                    <div class="col-lg-12">
                      <span>
												<small><span class="float-right" id="comments" name="1">Comments <span class="quantity"><bold>1</bold></span></span>
                      </small>
                      </span>
                    </div>
                  </div>
                </div>
                <div class="card-body">
                  <div class="row">
                    <div id="post-card-1" class="col-lg-12" style="position:relative;">
                      xdxddxd
                    </div>
                    <div class="col-lg-4 hide" id="comments-body-1">
                      <div class="divider"></div>
                      <div style="margin-left:2vw;">
                        <div style="vertical-align:middle;">
                          <strong>Comments</strong>
                          <button class="au-btn au-btn-icon au-btn--blue" style="line-height:25px!important;padding:0 5px!important;float:right;"><i class="zmdi zmdi-plus"></i>comment</button>
                        </div>
                        <br />
                        <div class="card">
                          <div class="card-body comment-body" style="position:relative;">
                            <strong> User </strong><br/>
                            <p>
                              shfashfihgliahgal
                            </p>
                          </div>
                        </div>
                      </div>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</body>
<script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>

Answer 1

好的，我希望你还在看这个问题。

首先，为什么您的.env*.local失败。让我们看一下这段代码。

show("slide"

$(function() {
    $("#button1").on("click", function() {
        // fade in. (but it doens't show due to priority problem.)
        $("#target1").fadeIn("slow", function() {
            // It shows at this timing.
            $("#target1").prop("class", "col-sm-4 show");
        });
    });
    $("#button2").on("click", function() {
        // fade in.
        $("#target2").fadeIn("slow");
    });
});

.hide {
    display: none !important;
}

.display-none {
    display: none;
}

接下来，您要移动整个post元素。也许我误会了。
但是我确实解决了我所想的一些问题。
你可以看看吗？如果有的话，请随时向我提问。

For Example.

调整列的大小，同时从右侧动画元素

1 个答案: