更新
我有一个div,.shadow-circle-lg:
我希望通过添加另一个类,.circle-highlight来淡入与div不同的边框样式:
.circle-highlight{ box-shadow: 0 0 0 1px rgba(0,0,0, 0.1), 0 0 0 10px rgba(188,190,192, 0.3); }
结果:
我希望这种过渡能够超过400毫秒.
我正在尝试使用以下函数通过fadeIn动画解决此问题:
$this.siblings('.user_icon').find('.shadow-circle-lg').addClass('circle-highlight').hide().fadeIn(400);
但是,以这种方式隐藏功能首先会在原始可见div消失时创建"闪光"效果.我只想淡出盒子阴影.
有任何想法吗?
使用可以使用简单的transition
属性:
.circle-highlight { transition: box-shadow 400ms; box-shadow: 0 0 0 1px rgba( 0, 0, 0, 0.1), 0 0 0 10px rgba(188,190,192, 0.3); }
然后只需添加该类.不要打电话fadeIn
$this.siblings('.user_icon') .find('.shadow-circle-lg') .addClass('circle-highlight');
查看实例:
http://jsfiddle.net/MTz8E/1/
UPDATE
对于一些不那么新的浏览器(Firefox 4,Opera),这可能会起作用:
.circle-highlight { -moz-transition: box-shadow 400ms; /* Firefox 4 */ -o-transition: box-shadow 400ms; /* Opera */ -webkit-transition: box-shadow 400ms; /* Chrome */ transition: box-shadow 400ms; box-shadow: 0 0 0 1px rgba( 0, 0, 0, 0.1), 0 0 0 10px rgba(188,190,192, 0.3); }