jQueryでCSSで設定した背景画像を自動で拡大縮小したい

Question

前提・実現したいこと

表題の通りです。

cssに背景画像を設置したのですが、それをjQueryで常に自動で拡大縮小しているようにしたいです。

<div id="work">
    <div class="workText">
      <p class="WorkIndex">
        サンプル
      </p>
    </div>
</div><!--work閉じタグ-->

#work{
  height: 750px;
  background-size: 2000px;
  background: url("work_bg.png");
}

<script>

$(function () {
setTimeout('workBk()');//背景画像アニメーションを実行(呼び出し)
});

function workBk() {
        $('#work').animate({
            background-size:'-=100px'
        }, 800).animate({
            background-size: '+=100px'
        }, 800);
        setTimeout('workBk()', 1600); //アニメーションを繰り返す間隔
    }

</script>

jQuery初心者でよく分かっていないのですが、
animateはプロパティの数値を変化させると認識しているので、background-sizeを記述し、
pxサイズを変化させることで動いているように見せようとしたのですが、違うのでしょうか？？

宜しくお願いします。

Comments

[kszk311]

質問者さんの想定している動きのイメージが、これだけではよくわからないので、参考になるようなURLとかあれば貼っていただけますか。

[kato00]

説明がわかりずらくすいません。http://www.m-inuzuka.com/blog/web/css3-animation-tip/

[kato00]

このサイトの黄色い円のような動きをjQueryでやりたいです。

[kei344]

まだ質問が「受付中」になっていますが、「ベストアンサー」を選び「解決済」にされてはいかがでしょうか。

Answer 1

記載のCSSだと、background-sizeが効いていないので、下記どれかの指定にしましょう
・background-sizeをbackgroundの下に移動
・backgroundをbackground-imageにする
・一つにまとめる

#work{
  height: 750px;
  background: url("work_bg.png") no-repeat center / 2000px;
}

JSの方は、「background-size」を文字列として囲むか、「backgroundSize」とすると、動きます。

function workBk() {
	$('#work').animate({
		'background-size':'-=100px'
	}, 800).animate({
		'background-size': '+=100px'
	}, 800);
	setTimeout('workBk()', 1600); //アニメーションを繰り返す間隔
}

Comments

[kato00]

「backgroundSize」で動きました！！いつもありがとうございます！！感謝です！

[kszk311]

また少し調べて見ましたので連絡を。
あらかじめbackground-sizeを"数値で"指定していないと、動かないようですね。
（containやcoverでは動作しない、指定しないのもautoになるのでダメ）

また、恥ずかしながら'-=○○'、'+=○○'で相対的に指定出来ることは初めて知りました。
今までいちいち計算して処理してたので、これからの制作で使える部分がありそうです。