0

別の div が押されたときに、ある div の背景画像を変更しようとしています。私はjQueryを使用していますが、そうするためにこれを見つけました...

$('#input_id').click(function() {
  $('#div_id').css('background-image','url')
});

ただし、1 つの div の背景画像を変更するだけでなく、他のいくつかの画像もアニメーション化する必要があります。

私は現在使用しています...

$('#input_id').click(function() {
$('#div1').animate({
    left: '0px'
}, 600);
$('#div2').animate({
    left: '-100%'
}, 1000);
$('#div3').animate({
    right: '-100px'
}, 200);
$('#div4').animate({
    top: '0px'
}, 600);
});

これは正常に機能し、必要なことはすべて実行しますが、これをリストに追加すると...

$('#div5').css({
    'background-image', 'url(../images/backgrounds/background2.png)');

完全に機能しなくなります。これは私の完全なコードです...

$('#input_id').click(function() {
$('#div1').animate({
    left: '0px'
}, 600);
$('#div2').animate({
    left: '-100%'
}, 1000);
$('#div3').animate({
    right: '-100px'
}, 200);
$('#div4').animate({
    top: '0px'
}, 600);
$('#div5').css({
    'background-image', 'url(../images/backgrounds/background2.png)');
});

Div 5 の CSS 背景画像コードは...

#div5 {
...
background-image:url(../images/backgrounds/background1.png);
...
}

これがうまくいかない理由は誰にもわかりますか？明らかに間違ったことをしたか、どこかで何かを見逃していませんか?

4

5 に答える 5

2

2つのことがあります...

$('#div5').css({
    'background-image': 'url(images/backgrounds/background2.png)'
});

まず、そのコードの最後に構文エラーがありました (2 つの閉じ括弧)。

第二に、これは純粋な推測ですが、CSS ファイルは css (またはスタイル) フォルダーにある可能性があります。そこから画像フォルダーを参照するのは正しいですが../images、ページで実行されているスクリプトからではありません。（先頭の を削除したことに注意してください../）。

于 2013-02-12T15:41:33.320 に答える
2

あなたは何かを逃した"});"

    $('#input_id').click(function() {
    $('#div1').animate({
        left: '0px'
    }, 600);
    $('#div2').animate({
        left: '-100%'
    }, 1000);
    $('#div3').animate({
        right: '-100px'
    }, 200);
    $('#div4').animate({
        top: '0px'
    }, 600);
    $('#div5').css({
        'background-image', 'url(../../images/backgrounds/background2.png)');
    });
});
于 2013-02-12T15:43:24.763 に答える
2

jQuery に実際の css を入れないことをお勧めします。

代わりに、jQuery を使用してクラスを追加し、css ファイルで background プロパティを指定します。

$('#div5').addClass("myclass");

.myclass {
    background-image: url(images/backgrounds/background2.png);
}

その後、必要に応じて removeClass() メソッドを使用して削除できます。

$('#div5').removeClass("myclass");
于 2013-02-12T15:43:55.437 に答える
1

君の

$('#div5').css({
    'background-image', 'url(../images/backgrounds/background2.png)');

{を含む

$('#div5').css('background-image', 'url(../images/backgrounds/background2.png)');
于 2013-02-12T15:43:14.003 に答える
1

これを試して：

$('#div5').css('background-image', 'url(../images/backgrounds/background2.png)');
于 2013-02-12T15:45:32.607 に答える