3
저는 작업중인 Ajax 기반 응용 프로그램의 창 위쪽에서 내용 (항목 목록)의 조각으로 애니메이션을 적용하려고합니다. 내가하는 일은 아약스를 호출하고 결과 HTML을 본문 상단에 붙이는 것입니다. 엘리먼트의 CSS는 음의 상단 여백이 100 %입니다. 그런 다음 element.animate를 사용하여 콘텐츠의 애니메이션을 0의 위쪽 여백으로 지정합니다.JQuery 높이가 부동 요소와 함께 작동하지 않습니다.
높이가 동적 인 콘텐츠는 뒤로 슬라이드하고 사용자가 버튼을 클릭 할 때 숨겨야하는 문제입니다. . marginTop을 사용하여 시도 : '-100 %'하지만 전신의 내용이 위로 움직여 사라지는 상황에서 이상한 행동을하게되고 즉각적으로 다시 나타납니다 (맨 위에있는 내용의 ajax'd 제외). 또한 컨테이너의 높이를 가져오고 음수 상위 magin으로 적용하려고 element.outerHeight()를 사용했지만 outerHeight 함수는 안쪽 여백 (40 픽셀) 만 반환하고 안쪽 내용은 무시합니다. 그러나 목록 항목이 정렬되지 않은 목록에 떠 있지 않으면 적절한 높이를 반환합니다.
이 아이디어를 얻는 방법에 대한 아이디어가 있으십니까?
감사합니다.
CSS (내가 사용 LESS) :
#lists-container{
width: 960px;
padding: 20px;
margin: -100% auto 10px auto;
#lists-list{
list-style-type: none;
margin: 0;
padding: 0;
width: 980px;
li{
float: left;
background: #FFF;
border: 1px solid #CCC;
padding: 2px 5px;
width: 310px;
.border-radius();
margin: 0 10px 10px 0;
position: relative;
p{
margin: 0;
padding: 0;
}
.list-name{
text-decoration: none;
font-size: 18px;
color: #333;
&:hover{
color: rgba(230,39,39,1);
}
}
span{
position: relative;
top: -2px;
padding: 0 0 0 10px;
}
a.delete-list{
color: #ccc;
font-weight: bold;
font-size: 18px;
text-decoration: none;
position: absolute;
right: -20px;
top: 3px;
&:hover{
color: #333;
}
}
}
}
}
다음 내가 모든 애니메이션을 사용하고 자바 스크립트와의 ajax'd의 요소의 CSS입니다자바 스크립트 :
$('#lists-toggle').live('click', function(){
showLoader();
if($('#lists-toggle').hasClass('open')){
$('#lists-container').animate({
marginTop: '-100%'
}, 500, function(){
$('#lists-container').remove();
hideLoader();
});
$('#lists-toggle').removeClass('open');
} else {
$.ajax({
url: $(this).attr('href'),
async:true,
type:'GET',
dataType:'json',
success:function (data, textStatus) {
hideLoader();
console.log(data);
var template = Handlebars.compile($("#listsTemplate").html());
var context = {lists: data['result']['lists']};
Handlebars.registerPartial('singleList', $("#singleListTemplate").html());
var result = template(context);
$('.page').prepend(result);
$('#lists-container').animate({
marginTop: 0
}, 500, function(){
// After appending the lists list, make the task list sortable.
$('#lists-list').sortable({
cursor: 'move',
update: function(event, ui) {
var newOrder = $(this).sortable('serialize');
$.ajax({
url: siteUrl+"lists/reorder/"+data['result']['user_id']+"?"+newOrder,
async:true,
type:'GET',
dataType:'json',
success:function (data, textStatus) {
console.log(data);
}
});
}
});
// Ensure to add the open class.
$('#lists-toggle').addClass('open');
});
}
});
}
return false;
});