我正在尝试向表中添加一行并将该行滑入视图,但是slidedown函数似乎是在表格行中添加了一个显示:块样式,这会混淆布局.
任何想法如何解决这个问题？
这是代码:
$.get('/some_url',
{ 'val1': id },
function (data) {
var row = $('#detailed_edit_row');
row.hide();
row.html(data);
row.slideDown(1000);
}
);
Emily.. 293
表行不支持动画.
来自Chaffer和Swedberg的"学习jQuery"
表行为动画提供了特定的障碍,因为浏览器使用不同的值(表行和块)作为其可见的显示属性.没有动画的.hide()和.show()方法始终可以安全地与表行一起使用.从jQuery版本1.1.3开始,也可以使用.fadeIn()和.fadeOut().
您可以将td内容包装在div中并使用slideDown.您需要确定动画是否值得额外加价.
表行不支持动画.
来自Chaffer和Swedberg的"学习jQuery"
表行为动画提供了特定的障碍,因为浏览器使用不同的值(表行和块)作为其可见的显示属性.没有动画的.hide()和.show()方法始终可以安全地与表行一起使用.从jQuery版本1.1.3开始,也可以使用.fadeIn()和.fadeOut().
您可以将td内容包装在div中并使用slideDown.您需要确定动画是否值得额外加价.
我只是动态地包装tr,然后在slideUp/slideDown完成后将其删除.这是一个非常小的开销,添加和删除一个或几个标签,然后在动画完成后删除它们,我没有看到任何明显的滞后.
幻灯片:
$('#my_table > tbody > tr.my_row')
.find('td')
.wrapInner('')
.parent()
.find('td > div')
.slideUp(700, function(){
$(this).parent().parent().remove();
});
滑下:
$('#my_table > tbody > tr.my_row')
.find('td')
.wrapInner('')
.parent()
.find('td > div')
.slideDown(700, function(){
var $set = $(this);
$set.replaceWith($set.contents());
});
我必须向fletchzone.com致敬,因为我拿走了他的插件并将其剥离回上面,欢呼队友.
这是我为此编写的一个插件,它需要一些Fletch的实现,但我的仅用于向上或向下滑动一行(没有插入行).
(function($) {
var sR = {
defaults: {
slideSpeed: 400,
easing: false,
callback: false
},
thisCallArgs: {
slideSpeed: 400,
easing: false,
callback: false
},
methods: {
up: function (arg1,arg2,arg3) {
if(typeof arg1 == 'object') {
for(p in arg1) {
sR.thisCallArgs.eval(p) = arg1[p];
}
}else if(typeof arg1 != 'undefined' && (typeof arg1 == 'number' || arg1 == 'slow' || arg1 == 'fast')) {
sR.thisCallArgs.slideSpeed = arg1;
}else{
sR.thisCallArgs.slideSpeed = sR.defaults.slideSpeed;
}
if(typeof arg2 == 'string'){
sR.thisCallArgs.easing = arg2;
}else if(typeof arg2 == 'function'){
sR.thisCallArgs.callback = arg2;
}else if(typeof arg2 == 'undefined') {
sR.thisCallArgs.easing = sR.defaults.easing;
}
if(typeof arg3 == 'function') {
sR.thisCallArgs.callback = arg3;
}else if(typeof arg3 == 'undefined' && typeof arg2 != 'function'){
sR.thisCallArgs.callback = sR.defaults.callback;
}
var $cells = $(this).find('td');
$cells.wrapInner('');
var currentPadding = $cells.css('padding');
$cellContentWrappers = $(this).find('.slideRowUp');
$cellContentWrappers.slideUp(sR.thisCallArgs.slideSpeed,sR.thisCallArgs.easing).parent().animate({
paddingTop: '0px',
paddingBottom: '0px'},{
complete: function () {
$(this).children('.slideRowUp').replaceWith($(this).children('.slideRowUp').contents());
$(this).parent().css({'display':'none'});
$(this).css({'padding': currentPadding});
}});
var wait = setInterval(function () {
if($cellContentWrappers.is(':animated') === false) {
clearInterval(wait);
if(typeof sR.thisCallArgs.callback == 'function') {
sR.thisCallArgs.callback.call(this);
}
}
}, 100);
return $(this);
},
down: function (arg1,arg2,arg3) {
if(typeof arg1 == 'object') {
for(p in arg1) {
sR.thisCallArgs.eval(p) = arg1[p];
}
}else if(typeof arg1 != 'undefined' && (typeof arg1 == 'number' || arg1 == 'slow' || arg1 == 'fast')) {
sR.thisCallArgs.slideSpeed = arg1;
}else{
sR.thisCallArgs.slideSpeed = sR.defaults.slideSpeed;
}
if(typeof arg2 == 'string'){
sR.thisCallArgs.easing = arg2;
}else if(typeof arg2 == 'function'){
sR.thisCallArgs.callback = arg2;
}else if(typeof arg2 == 'undefined') {
sR.thisCallArgs.easing = sR.defaults.easing;
}
if(typeof arg3 == 'function') {
sR.thisCallArgs.callback = arg3;
}else if(typeof arg3 == 'undefined' && typeof arg2 != 'function'){
sR.thisCallArgs.callback = sR.defaults.callback;
}
var $cells = $(this).find('td');
$cells.wrapInner('');
$cellContentWrappers = $cells.find('.slideRowDown');
$(this).show();
$cellContentWrappers.slideDown(sR.thisCallArgs.slideSpeed, sR.thisCallArgs.easing, function() { $(this).replaceWith( $(this).contents()); });
var wait = setInterval(function () {
if($cellContentWrappers.is(':animated') === false) {
clearInterval(wait);
if(typeof sR.thisCallArgs.callback == 'function') {
sR.thisCallArgs.callback.call(this);
}
}
}, 100);
return $(this);
}
}
};
$.fn.slideRow = function(method,arg1,arg2,arg3) {
if(typeof method != 'undefined') {
if(sR.methods[method]) {
return sR.methods[method].apply(this, Array.prototype.slice.call(arguments,1));
}
}
};
})(jQuery);
基本用法:
$('#row_id').slideRow('down');
$('#row_id').slideRow('up');
将幻灯片选项作为单个参数传递
$('#row_id').slideRow('down', 500); //slide speed
$('#row_id').slideRow('down', 500, function() { alert('Row available'); }); // slide speed and callback function
$('#row_id').slideRow('down', 500, 'linear', function() { alert('Row available'); }); slide speed, easing option and callback function
$('#row_id').slideRow('down', {slideSpeed: 500, easing: 'linear', callback: function() { alert('Row available');} }); //options passed as object
基本上,对于向下滑动动画,插件将DIV中的单元格内容包装起来,为它们设置动画,然后将它们移除,反之亦然,以便向上滑动(通过一些额外的步骤来消除单元格填充).它还返回您调用它的对象,因此您可以链接这样的方法:
$('#row_id').slideRow('down').css({'font-color':'#F00'}); //make the text in the row red
希望这有助于某人.
京公网安备 11010802040832号 | 京ICP备19059560号-6 