1

WordPressテーマのサイドバーウィジェットのドロップダウン効果を切り替えています。

h2ウィジェット内のタグには、背景位置が異なる2つの背景画像があります。

この背景のCSSは次のようになります。

background-image: url(images/h2bg.png), url(images/button.png);
background-position: center left, bottom right;
background-repeat: no-repeat,no-repeat;

私がやりたいのは、ユーザーがh2要素をクリックしたときに、要素ボックスから最初の背景（h2bg.png）をアニメーション化し、次に2番目の背景画像の位置をに変更することtop leftです。（これは小さなスプライト画像です）

そして私のjQueryスクリプトは次のようなものです:(あなたはそれを通過する必要はありません）

$(document).ready(function() {
    $('#sidebar div.widget').each(function(i) {
        height = $(this).css('height');
        $(this).attr('data-height',height);
        $(this).attr('data-animate','ON');
    });
    $('.widget h2').click(function() {
        if ($(this).parent('div.widget').attr('data-animate') == 'OFF') {
            $(this).parent('div.widget').attr('data-animate','ON');
            height = $(this).parent('div.widget').attr('data-height');
            $(this).parent('div.widget').animate({
                height: height
            },500);
            $(this).animate({
                'background-position-x': '0%, 100%'
            },500,function() {
                $(this).css('background-position-y','50%, 100%');
            });
        } else {
            $(this).parent('div.widget').attr('data-animate','OFF');
            $(this).parent('div.widget').animate({
                height: '29px'
            },500);
            $(this).animate({
                'background-position-x': '-100%, 100%'
            },500,function() {
                $(this).css('background-position-y','50%, 0%');
            });
        }
    });
});

簡単に言えば..javascriptがとをセミコロンを挟んだパーセナトとして返すことに気づきましたbackground-position-x。background-position-y

だから私はアニメーションにパーセンテージを使用しました、そしてそれは1つの背景画像のためにうまくいきました。しかし、複数の背景になると、それは機能しません！私はセミコロンでそれを試しました...セミコロンとピクセル値なしで、しかし運がありません！

jQueryで複数の背景位置プロパティを処理するにはどうすればよいですか？！

4

2 に答える 2

1

.css/.animate メソッドで画像 URL を再定義する必要がある場合があります。

'background-image' : 'url("image1.png"), url("image2.png")',
'background-position' : 'right 50px left 50px' (or whatever)

CSS は一連の image-url 宣言を使用して、どのプロパティがどの画像に適用されるかを判断します。そのため、ブラウザーが基準点を持たない場合にすぎない可能性があります (スタイルがスタイルシートではなくインラインで適用されるため)。

また、'background-position' 宣言に固執してください。background-position-x、background-position-y が複数の画像で機能するかどうかは不明です。

アップデート

jQuery は背景画像をアニメーション化できません。同じ効果を得るには、ターゲット要素の下に積み重ねられた div を使用してそれを偽造し、代わりにそれらのサイズを変更する必要があります。

于 2012-10-31T18:20:14.310 に答える
0

'background-position' : 'value px value px'またはまたはあなたに合ったものを使用'left top'してください。

于 2012-10-31T18:09:42.277 に答える