为 Div 背景设置动画 - CSS 或 jQuery
Posted
技术标签:
【中文标题】为 Div 背景设置动画 - CSS 或 jQuery【英文标题】:Animate a Div Background - CSS or jQuery 【发布时间】:2013-06-16 19:34:35 【问题描述】:我有一个高度优化的页面,用于成像和一些非常图形化的效果。
我有一段时间一直在尝试做某事,但找不到明确的答案。
我想通过 jQuery 以与内部动画相同的速度 (500) 为 css 背景属性设置动画
请记住,我的其他动画是基于图像的,这与我正在实施的内容有充分的理由
我可以以 500 的动画速率编辑整个 div 的背景属性(如现场所见)吗?
http://www.sinsysonline.com/design/index.html
jQuery
<script type='text/javascript'>
$(document).ready(function()
$(".feat3col").hover(
function()
$(this).find('img.a').stop().animate("opacity": "0", "fast");
$(this).css('background', '#000');
,
function()
$(this).find('img.a').stop().animate("opacity": "1", "slow");
$(this).css('background', '#FFF');
);
);
</script>
http://www.sinsysonline.com/design/index.html 标记:
<div class="featured">
<div class="feat3col">
<h2>Packages</h2>
<div class="imgGlow">
<img class="a" width:"200px" height:"300px" src="images/filler_200x300.jpg" />
<img class="b" width:"200px" height:"300px" src="images/filler_200x3002.jpg" />
</div>
<p>This should extend roughly 5-7 lines. It is simply filler for development purposes. Ignore this statement, and the link below.</p>
<a href="#" class="botCap">Link Link</a>
</div>
<div class="feat3col">
<h2>Reviews</h2>
<div class="imgGlow">
<img class="a" width:"200px" height:"300px" src="images/filler_200x300.jpg" />
<img class="b" width:"200px" height:"300px" src="images/filler_200x3002.jpg" />
</div>
<p>This should extend roughly 5-7 lines. It is simply filler for development purposes. Ignore this statement, and the link below. Make more content!</p>
<a href="#" class="botCap">Link Link</a>
</div>
<div class="feat3col">
<h2>About</h2>
<div class="imgGlow">
<img class="a" width:"200px" height:"300px" src="images/filler_200x300.jpg" />
<img class="b" width:"200px" height:"300px" src="images/filler_200x3002.jpg" />
</div>
<p>This should extend roughly 5-7 lines. It is simply filler for development purposes. Ignore this statement, and the link below. Yet again, these are simply use case scenarios to display different heights and how it still works.</p>
<a href="#" class="botCap">Link Link</a>
</div>
</div>
http://www.sinsysonline.com/design/index.html
请记住,如果这是一个菜鸟问题,我制作了一些病态的网站,但必须使用插件。用我自己的开发来 100% 单独完成这一部分。我需要与图像配对完成此操作的原因是,如果我在图像上启用透明度,它会变成 50kb 左右(相对于 2-7kb),并带有优化和淡入淡出,等等。我希望能够利用这张图片来制作一些带有淡入淡出的实际图形设计,并且整个 div 在淡入淡出时与背景相匹配。
【问题讨论】:
可以试试后台定位插件keith-wood.name/backgroundPos.html 检查这个答案***.com/questions/15173719/…它可能对你有帮助 这两个答案都需要插件。我试图避免这种情况。除了位置和不透明度,在 jQuery 中真的没有什么可以制作动画的了吗? 【参考方案1】:跳过 jQuery,直接使用 css:
.feat3col
background-color: #fff;
-webkit-transition: background-color 0.5s;
-moz-transition: background-color 0.5s;
-o-transition: background-color 0.5s;
transition: background-color 0.5s;
.feat3col img.a
opacity: 1;
-webkit-transition: opacity 0.5s;
-moz-transition: opacity 0.5s;
-o-transition: opacity 0.5s;
transition: opacity 0.5s;
.feat3col:hover
background-color: #000;
.feat3col:hover img.a
opacity:0;
或者,如果你真的想使用 jQuery,那么只需在图像不透明度上调用 animate,并传入使用 step/progress 函数的选项。在 step/progress 函数中,做任何你想做的事情,以与不透明度相同的速率为其他东西设置动画,但你需要自己处理计算颜色。显然白变黑再变白很简单。
jQuery 解决方案:
$(document).ready(function ()
$(".feat3col").hover(
function ()
$(this).find('img.a').finish().animate(
opacity: 0
,
duration: 500,
progress: function (animation, p, remainingMs)
var c = parseInt(255 - (p * 255));
$(this).closest('.feat3col')
.css('background-color', 'rgb('+c+','+c+','+c+')');
// do other animation stuffs
)
,
function ()
$(this).find('img.a').finish().animate(
opacity: 1
,
duration: 500,
progress: function (animation, p, remainingMs)
var c = parseInt(p * 255);
$(this).closest('.feat3col')
.css('background-color', 'rgb('+c+','+c+','+c+')');
// do other animation stuffs
)
);
);
jsfiddle:http://jsfiddle.net/rW3FC/
【讨论】:
这是要走的路,特别是因为您说您的网站已经过高度优化。 js比css消耗资源多,所以大部分人只有在css做不到的情况下才会倾向于js/jQuery。您还可以使用 css 制作其他动画,例如缩放、旋转和淡化颜色等。 你也可以拍照,剪掉没用的部分,把白色改成透明,把调色板减少到32色,图片大概23k左右。仍然比您的 8k 原始文件大,但仍然很小的 PNG。你也可以把它做成一个 .GIF 文件,通过一些快速编辑,结果是 ~11k。【参考方案2】:我认为您不能通过 jQuery 为背景设置动画。您可以做的是在其他内容后面放置另一个 img 或 div,并根据需要将其淡入淡出,以假装一个动画背景。
【讨论】:
sigh 我已经害怕这样做了……我已经这样做了一次,这是一种糟糕的做法。那么也许是一个 css 动画解决方案?【参考方案3】:http://www.sinsysonline.com/design/index.html
解决方案: jQuery
$(document).ready(function()
$(".feat3col").hover(
function()
$(this).find('img.a').stop().animate("opacity": "0", 500);
,
function()
$(this).find('img.a').stop().animate("opacity": "1", 500);
);
);
</script>
解决方案: CSS
.feat3col:hover
-webkit-transition: all .5s ease-in-out;
-moz-transition: all .5s ease-in-out;
-o-transition: all .5s ease-in-out;
transition: all .5s ease-in-out;
background:#EEE;
border-radius:50px;
【讨论】:
以上是关于为 Div 背景设置动画 - CSS 或 jQuery的主要内容,如果未能解决你的问题,请参考以下文章