0

画像処理用に高度に最適化されたページと、非常にグラフィック効果のあるページがあります。

しばらくやりたいことがあるのですが、明確な答えが見つかりません。

内部アニメーションと同じ速度で jQuery 経由で css の背景プロパティをアニメーション化したい (500)

私の他のアニメーションは、私が実装しているものに正当な理由があるため、画像ベースです。

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% ソロで行っています。画像とペアでこれを達成する必要がある理由は、画像の透明度を有効にすると、最適化とフェードを使用して 50kb 程度 (vs 2-7kb) になるためです。この画像を利用して、フェードを使用した実際のグラフィック デザインを作成し、div 全体を背景に合わせてフェードさせたいと考えています。

4

3 に答える 3

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を呼び出し、ステップ/進行関数が使用されるオプションを渡します。ステップ/進行機能内で、不透明度と同じレートで他のものをアニメーション化するために必要なことは何でもしますが、色の計算を自分で処理する必要があります。明らかに、白から黒へ、そして白へ戻るのは簡単です。

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/

于 2013-06-20T05:22:00.733 に答える
0

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;

}

于 2013-06-20T05:34:16.390 に答える
0

jQuery経由で背景をアニメーション化できるとは思いません。あなたができることは、他のコンテンツの背後に別の img または div を配置し、必要に応じてフェードインおよびフェードアウトして、アニメーション化された背景を偽造することです。

于 2013-06-20T04:55:38.620 に答える