件名：jQueryで横スライドするときにテキストがガタつく
みなさんこんにちわ。jQueryのanimateなのですが、widthをつかってdivボックスを横スライドするとき、divの中のテキストが下からガタつきながら出てきてしまいます。縦方向だと綺麗にスライドしてくるのですが・・・。何か解決策はありますか？
何言ってるのかよくわからない
javascript(jQuery)は、単に動的にCSSの値を変更しているだけに過ぎないので、まず考えるべきは、javascriptを用いずに、CSSだけでアニメーションできるかどうかということじゃないかな。その上で、回答するなら、アニメーションさせるべきCSSのプロパティは、widthやmarginやpaddingではなく、position:absoluteしたleftやtopだと思う。つまり、jQuery云々の話ではなく、CSSレベルの話かと。
ご回答ありがとうございます。CSSでアニメーションやったことないので、切り分けのために勉強してみます。
フレームレイト調整してみたらどうでしょうか？
ご回答ありがとうございます。たしかjqのフレームレートはハードコードだったと思いますので、ちょっと調整はめんどくさそうですね。
つ $.fx.interval
単に折り返しの問題だったりしない？幅が変われば当然文字の折り返し位置も変わる→アニメーション中は1文字ずつ落ちるor戻る
この場合、インナー要素を作って、そっちに最大幅を指定しておけば、折り返し位置が変わったりしなくなるはず。
<style> .box { width:200px; overflow:hidden; } .box_inner { width:200px; }</style>
<script>$(function(){ $(’.box’).click(function(){ $(this).animate({ width:0 }); });});</script>
<div class="box"> <div class="box_inner">じゅげむ じゅげむ ごこうのすりきれ かいじゃりすいぎょの すいぎょうまつ うんらいまつ ふうらいまつ くうねるところにすむところ やぶらこうじのぶらこうじ ぱいぽ ぱいぽ ぱいぽのしゅーりんがん しゅーりんがんのぐーりんだい ぐーりんだいのぽんぽこぴーの ぽんぽこなーの ちょうきゅうめいのちょうすけ</div></div>
ご回答ありがとうございます。見てみたらおっしゃるとおり、折り返しの問題でした・・・。コードまで書いていただいて感謝です。助かりました。
お前が先にコード書けっつー話だよな
みんなの回答 4 件
何言ってるのかよくわからない
javascript(jQuery)は、単に動的にCSSの値を変更しているだけに過ぎないので、まず考えるべきは、javascriptを用いずに、CSSだけでアニメーションできるかどうかということじゃないかな。
その上で、回答するなら、アニメーションさせるべきCSSのプロパティは、widthやmarginやpaddingではなく、position:absoluteしたleftやtopだと思う。
つまり、jQuery云々の話ではなく、CSSレベルの話かと。
フレームレイト調整してみたらどうでしょうか？
単に折り返しの問題だったりしない？
幅が変われば当然文字の折り返し位置も変わる
→アニメーション中は1文字ずつ落ちるor戻る
この場合、インナー要素を作って、そっちに最大幅を指定しておけば、折り返し位置が変わったりしなくなるはず。
<style>
.box { width:200px; overflow:hidden; }
.box_inner { width:200px; }
</style>
<script>
$(function(){
$(’.box’).click(function(){
$(this).animate({ width:0 });
});
});
</script>
<div class="box">
<div class="box_inner">じゅげむ じゅげむ ごこうのすりきれ かいじゃりすいぎょの すいぎょうまつ うんらいまつ ふうらいまつ くうねるところにすむところ やぶらこうじのぶらこうじ ぱいぽ ぱいぽ ぱいぽのしゅーりんがん しゅーりんがんのぐーりんだい ぐーりんだいのぽんぽこぴーの ぽんぽこなーの ちょうきゅうめいのちょうすけ</div>
</div>
関連するトピックス