Jqueryで横幅の伸び縮みをしたい

Question

サイトを作っているのですが、

$(function() {
	var cnt = 0;
	if (cnt % 2 == 0) {
		$('#introduct').mouseover(function() {
			$(this).animate({
				width: '1200px'
			}, 700); 
		}); cnt ++;

		if (cnt % 2 != 0) {
			$(this).mouseout(function() {
				$(this).animate({
					width: '500px'
				}, 500);
			}); cnt ++;
		}; 
	}
})

マウスオーバーしたときに横幅が伸びて、アウトしたときに縮むという処理をしたいんですが、これだと伸びただけでとまってしまいます。どうすればいいですか？

Answer 1

$(function() {
        $('#introduct').mouseover(function() {
            $(this).animate({
                width: '1200px'
            }, 700); 
        }).mouseout(function() {
                $(this).animate({
                    width: '500px'
                }, 500);
            });
        }; 
})

動作未検証だけど、こんな感じでしょう。

hover 使う方が簡単じゃないかとも思ったケド…

$(function () {
	$('#introduct').hover(
		function () {
			$(this).animate({width: '1200px'}, 700);
		},
		function () {
			$(this).animate({width: '500px'}, 500);
		}
	);
});

Comments

[foo45]

hoverのほう使わせてもらいました。
ありがとうございました