JQueryを使用して何かをアニメーション化しようとしています。
思い通りに機能しています。これはjQueryです:
$(document).ready(function() {
// go chat button
$('#go-chat input').click(function() {
$('#search, #go-chat').animate({width: '0px'}, 1000, function() {
$(this).hide();
$('#login, #go-search').animate({width: '573px'}, 1000, function() {
$(this).show();
}
);
}
);
});
$('#go-search input').click(function() {
$('#login, #go-search').animate({width: '0px'}, 1000, function() {
$(this).hide();
$('#search, #go-chat').animate({width: '573px'}, 1000, function() {
$(this).show();
}
);
}
);
});
});
ここでの問題は、スライドが発生するとテキストが折り返され、非常に醜いことです。幅を狭めたり広げたりするときに折り返さずに、テキストを検索バーおよび入力フィールドとしてスライドイン/アウトするようにするにはどうすればよいですか?
ありがとう。
基本的に、検索バーを左側にスライドさせて、基本的に非表示にし、その下にある4つの入力をスライドアウトさせます。今のところ、それらを検索バーの下に配置しましたが、私の計画はそれらを非表示にすることです。そして「Go Chat」ボタンを押すと、検索が左にスライドアウトし、4つの入力が右にスライドインします。
現在、検索ボックスは中央にスライドし、完全には消えません。どうすれば思い通りに機能させることができますか?何を探しているのかわからない場合は、説明を求めてください。
ありがとう。
私はそれを考え出した。左にスライドさせるために、対応する周囲の<div>
sに幅とmargin-left: 0px;
を指定しました。次に、幅が狭く/広くなると、テキストの折り返しの問題が発生しました。これを修正するために、対応するwhite-space: nowrap;
sのCSSに<div>
を追加しました。
JQueryは次のとおりです。
$(document).ready(function() {
$('#go-chat input').click(function() {
$('#search, #go-chat').animate(
{
width: '0px'
}, 1000, function() {
$(this).hide();
$('#login, #go-search').animate(
{
width: '573px'
}, 1000, function() {
$(this).show();
}
);
}
);
});
$('#go-search input').click(function() {
$('#login, #go-search').animate(
{
width: '0px'
}, 1000, function() {
$(this).hide();
$('#search, #go-chat').animate(
{
width: '573px'
}, 1000, function() {
$(this).show();
}
);
}
);
});
});
...そしてCSS:
#search {
border: 1px solid #999999;
-moz-border-radius: 5px;
width: 573px;
height: 40px;
margin: auto;
margin-top: 100px;
margin-left: 0px;
position: relative;
}
#go-chat {
width: 575px;
margin: auto;
margin-top: 36px;
margin-left: 0px;
padding-top: 5px;
white-space: nowrap;
}
#login {
border: 0px;
width: 0px;
display: none;
margin: auto;
margin-top: 100px;
margin-left: 0px;
position: relative;
}
#go-search {
width: 0px;
margin: auto;
margin-top: 36px;
margin-left: 0px;
padding-top: 5px;
white-space: nowrap;
display: none;
}
私がjQueryをフォーマットした方法について提案がある場合は、私にあなたの考えを知らせてください...私がフォーマットした方法が好きですか?少しぎこちない感じです。
変更してみてください
$('#search').animate({
width: '0px',
},
'1000'
);
に
$('#search').animate({ width: '0px' }, 1000, function() {
$(this).hide();
});
アニメーションが完了すると、要素は非表示になります。
また、「検索」テキストがうまくアニメーション化されていないことにも気付きました。アニメーションを行う前に、テキストを削除(またはフェードアウト)してみてください。元に戻すときは、もう一度表示してください。例えば:
$('#search-label').hide();
OR
$('#search-label').fadeOut();
$('#search').animate({width: '0'}, 1000, function(){
$(this).hide();
});
このページはトグルでおかしくなります...セレクタを気にしてください。