$(".slideoutmenu").animate({ width: 0,opacity: 0 },function() { $(this).hide(); });
这些元素的宽度可以有所不同,但文档通过CSS正确布局,而不设置特定的宽度.
通常,要重新显示这些元素,我可以简单地做这样的事情：
$(".slideoutmenu").stop().show().css({ width: '',opacity: 1 });
但是,我想反转这些元素(淡入淡出和扩展).
通常我会这样做：
$(this).children(".slideoutmenu").stop().show().animate({ width: 250,opacity: 1 });
所以这是显而易见的尝试：
$(this).children(".slideoutmenu").stop().show().animate({ width: "",opacity: 1 });
但这不行.
最终,这里的问题是上述示例中固定的“250”数字.这不起作用,因为宽度是可变的.我需要结合使用css setter和“animate”中的空字符串的结果…但我不知道如何做到这一点.我已经尝试用“undefined”,“null”,“-1”,“”替换“250”,我搜索过Google …没有用.
我明白,我可以用一些隐藏在用户上的元素做一些测量技巧 – 但是我不能想象这不是一个相当普遍的问题 – 所以我希望有一个“标准”的方法来做到这一点,或者说它建立在一些如何,我只是不知道.
谢谢阅读.
跟进：
基于迈克尔的亲切反应,我组装了一个小的快速和脏的插件,所以我可以完成这个内联. (也许有人可以扩展插件的想法,使之更好)
这是插件：
(function( $){
$.fn.cacheCss = function( prop ) {
return this.each(function() {
var $this = $(this);
if (prop instanceof Array)
{
for (var pname in prop)
{
if ($this.data('cssCache-' + prop[pname]) != undefined)
continue;
$this.data('cssCache-' + prop[pname],$this.css(prop[pname]));
}
}
else
{
if ($this.data('cssCache-' + prop) != undefined)
return $this;
$this.data('cssCache-' + prop,$this.css(prop));
}
return $this;
});
};
$.fn.revertCss = function(settings,prop,animated) {
if (settings == null)
settings = {};
return this.each(function() {
var $this = $(this);
if (prop instanceof Array)
{
for (var pname in prop)
{
if ($this.data('cssCache-' + prop[pname]) != undefined)
settings[prop[pname]] = $this.data('cssCache-' + prop[pname]).replace(/px$/,"");
}
}
else
{
if ($this.data('cssCache-' + prop) != undefined)
settings[prop] = $this.data('cssCache-' + prop).replace(/px$/,"");
}
if (!animated)
return $this.css(settings);
return $this.animate(settings);
});
};
})( jQuery );
设置CSS属性的起始行：
$(".slideoutmenu").animate({ width: 0,function() { $(this).hide(); });
被替换为：
$(".slideoutmenu").cacheCss('width').animate({ width: 0,function() { $(this).hide(); });
现在,“.cacheCss(‘width’)”在执行动画之前缓存css属性的值.
那行我不得不“撤消”那些变化：
$(this).children(".slideoutmenu").stop().show().animate({ width: 250,opacity: 1 });
被这个替换了
$(this).children(".slideoutmenu").stop().show().revertCss({ opacity: 1 },'width',true);
现在,“.revertCss(…)”将使用缓存的设置恢复我的宽度属性(动画！)
我也使插头接受数组,所以你也可以这样做：
.cacheCss(['width','height'])
接着：
.revertCss(null,['width','height'],true)
第三个参数控制还原是否为动画.
如果您有其他属性,您想要同时动画化(就像我在前面的示例中使用“opacity”一样),您可以将它们作为第一个参数传递,就像将对象传递给.animate()函数一样.
我确定插头可以大大改善,但是我认为这样做可能会很好.
此外,还有一点 – 我不得不在css值的结尾再次替换有趣的“px”…,我相信可能有更好的方法来做,但是我只是使用了一个标准的正则表达式.
解决方法
$(".slideoutmenu").each(function(){
$(this).data('width',$(this).css('width'));
$(this).animate({
width: 0,opacity: 0
});
});
$(".slideoutmenu").each(function(){
$(this).children(".slideoutmenu").stop().animate({
width: $(this).data('width'),opacity: 1
});
});
