调整列大小的同时从右侧为元素设置动画
调整列大小的同时从右侧为元素设置动画
提问于 2018-07-27 17:36:36
在下面显示的代码中，我有一个帖子，其中有一个评论按钮，它将从右侧将评论框滑入视图中。我将主post元素的大小从父元素的100%调整为父元素的67% (col lg-12到col lg-8)。尽管我正在尝试让post元素与注释元素的入口同时移动。
此外，在我的小提琴中，我似乎不能修复评论如何在整个post元素中滑动，而不是只滑过它的一部分。此外，我不能修复动画中它只是出现而不是滑入，尽管滑出动画工作。
奇怪的是，下面的代码片段并不像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>
回答 1
Stack Overflow用户
发布于 2018-07-30 21:08:47
好的，我希望你还在关注这个问题。
首先，为什么你的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;
}<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="target1" class="col-sm-4 hide">
Hello my name is col-sm-4! for display:none !important;
</div>
<div id="target2" class="col-sm-4 display-none">
Hello my name is col-sm-4! for display:none;
</div>
<input type="button" class="button" value="show col-sm-4" id="button1">
<input type="button" class="button" value="show col-sm-4" id="button2">
接下来，您想要移动整个post元素。也许我误会了。
但我确实解决了一些问题。
你能看一下吗？如果有什么问题，请随时向我提问。
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/51555048
复制相关文章
相似问题
腾讯云开发者
Copyright © 2013 - 2026 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有
深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 
粤公网安备44030502008569号
腾讯云计算（北京）有限责任公司 京ICP证150476号 | 京ICP备11018762号