jQueryにて、.toggle()でアニメート
.toggle(
function(){ }
, function(){ }
);
こういう形で無名関数の中には.animateを入れてアニメーションを交互するようにしています。
(もうすぐこの形が使えなくなるそうですが…)
やりたいことはもう少し複雑で、まず.toggleするボタンを2つ以上にしたいと思っています。
それぞれのボタンは元々、
ボタン1:設定した"hoge1"を押すとあるテキストエリアが存在するボックスが大きくなったり小さくなったりする。hoge1ボタンもそれに合わせてwidthが大きくなったり小さくなったりする。
ボタン2:"hoge2"を押すとテキストエリアに対して.val("特定のテキスト").focus();するようにして"特定のテキスト"を追加してその後フォーカスするようなボタン。
これらは別々にちゃんと動いていまして、そこまでは出来てるんですが
ボタン2の"hoge2"に、押したら 『ボックスが開いた上でテキスト追加のフォーカス』 という動作を追加したいと思い
$(".hoge1, .hoge2").toggle(function(){
$(".textareabox").animate({width:"300px", height:"toggle", opacity:"toggle"});
$(".hoge1").animate({width:"300px"});
},function(){
$(".hoge1").animate({width:"150px"});
$(".textareabox").animate({width:"150px", height:"toggle", opacity:"toggle"});
});
こういう風にボタンを2つともセレクトすると、どちらか一方のみを使うのであれば動くんですが
当たり前のことに"hoge1"を一度だけ押してから"hoge2"を押すと
.hoge1のwidthは戻らずに、.textareaboxのみ引っ込んで(toggleして)、そこからずれていきます。
ややこしいのですが、場合分けすると
(".hoge1")をクリックしたら
未アニメート時:出す
既アニメート時:ひっこめる
("hoge2")をクリックしたら
未アニメート時:出して.val().focus()
既アニメート時:出したままで.val().focus()
こういうことにしたいです。.val.focusは別でscript書いてます。
:not(:animated)とかいうのをググって見つけたんですがいまいちわかりません。
初心者なので前提からしてどこか間違ってるかもしれませんが
どなたかお知恵拝借願います。。。