动画一个Div背景- CSS或jQuery

Question

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

我有件事我已经尝试了一段时间了，却找不到一个明确的答案。

我想以与内部动画(500)相同的速度通过jQuery动画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" 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>

http://www.sinsysonline.com/design/index.html

请记住，如果这是一个菜鸟的问题，我已经做了一些病态的网站，但不得不使用插件。做这部分100%的个人与我自己的发展。我需要在图像中实现这一点的原因是，如果我启用了图像的透明度，它将变成50 7kb左右(vs2-7kb)，通过优化和衰减，诸如此类的。我想要能够利用这个图像，使一些实际的图形设计与一个淡出，和整个div匹配背景，因为它消失。

Answer 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，那么只需调用图像不透明度上的动画，并传入使用步骤/进度函数的选项。在步骤/进度函数中，做任何您想要以与不透明度相同的速度动画其他内容的操作，但是您需要自己处理计算颜色。显然，从白色到黑色，再回到白色是很简单的。

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

小提琴手：http://jsfiddle.net/rW3FC/

Answer 2

我不认为你可以通过jQuery动画背景。你可以做的是把另一个img或div放在其他内容后面，并根据需要将其淡入淡出，以伪造动画背景。

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

}