设置Div背景动画-CSS或jQuery

我有一个高度优化的图像页面和一些非常图形化的效果

我有一件事我已经试着做了一段时间，但找不到一个明确的答案

我想通过jQuery以与内部动画（500）相同的速度设置css背景属性的动画。

请记住，我的另一个动画是基于图像的，这与我正在实现的是有充分的理由的

我是否可以以500的动画速率编辑整个div的背景属性（如在live site上看到的）

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>

$（文档）.ready（函数（）{
$（“.feat3col”）。悬停(
函数（）{
$（this.find（'img.a'）.stop（）.animate（{“不透明”：“0”}，“快速”）；
$（this.css（'background'，'#000'）；
},
函数（）{
$（this.find（'img.a'）.stop（）.animate（{“opacity”：“1”}，“slow”）；
$（this.css（'background'，'#FFF'）；
});
});

标记：

<div class="featured">
            <div class="feat3col">
            <h2>Packages</h2>
                <div class="imgGlow">
                    <img class="a" width:"200px" height:"300px" src="images/filler_200x300.jpg" alt="test" />
                    <img class="b" width:"200px" height:"300px" src="images/filler_200x3002.jpg" alt="test" />
                </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" alt="test" />
                    <img class="b" width:"200px" height:"300px" src="images/filler_200x3002.jpg" alt="test" />
                </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" alt="test" />
                    <img class="b" width:"200px" height:"300px" src="images/filler_200x3002.jpg" alt="test" />
                </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>

包装
这应该延伸大约5-7条线。它只是用于开发目的的填充物。忽略此语句和下面的链接

评论
这应该延伸大约5-7条线。它只是用于开发目的的填充物。忽略此语句和下面的链接。制作更多内容

关于
这应该延伸大约5-7条线。它只是用于开发目的的填充物。忽略此语句和下面的链接。同样，这些只是用例场景，用于显示不同的高度以及它如何仍然工作

---

请记住，如果这是一个noob问题，我已经制作了一些病态的网站，但不得不使用插件。100%独自完成这一部分，并进行我自己的开发。我需要与图像一起完成这项工作的原因是，如果我在图像上启用透明度，它将变为50kb左右（相对于2-7kb），并进行优化和淡入淡出，诸如此类。我希望能够利用这幅图像进行一些实际的淡入淡出的图形设计，并在淡入淡出时使整个div与背景匹配。

我认为您无法通过jQuery设置背景动画。你可以做的是在其他内容后面放置另一个img或div，并根据需要淡入淡出，以模拟动画背景。

跳过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函数中，以与不透明度相同的速率对其他内容设置动画，但需要自己计算颜色。显然，从白到黑再回到白很简单

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
            }
        })
    });
});

jsidle:

解决方案： jQuery

---

}

你能试着使用背景位置插件吗检查这个答案可能对你有帮助。这两个答案都需要插件。我尽量避免这样。在jQuery中除了位置和不透明度之外真的没有其他动画吗？唉，我已经害怕这么做了。。。我已经做过一次了，这是很糟糕的做法。也许是css动画解决方案？这是一条路要走，特别是因为你说过你的网站是高度优化的。JS比css消耗更多的资源，所以大多数人只有在不能使用css的情况下才会使用JS/jQuery。你还可以用css制作其他动画，如缩放、旋转和褪色等。你还可以拍摄图像，裁剪出未使用的部分，将白色改为透明，并将颜色托盘减少到32种颜色，图像将为~23k。仍然比你的8k原版更大，但仍然很小。你也可以把它做成一个.GIF文件，经过一些快速编辑，结果是~11k。

$(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>

.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;