- ベストアンサー
jqueryのアニメーションが動かない！
- $(".skinTitleArea").css("opacity","0"); $(function(){ $(".skinTitleArea").animate({"opacity","1"},500); };
- http://ameblo.jp/koko5666/ アメブロなのですが、append等はちゃんと反映されてるのでjquery本体は読み込まれてます。なのにアニメーションanimateが動かない。入れるとjqueryが読み込まなくなって、他の記述も反映されなくなる。
- <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.0/jquery.min.js"></script> <script src="https://dl.dropbox.com/u/63681173/loveinstagram/jquery.common.js"></script> アニメーションが入ってるjavascriptは現在消してます https://dl.dropbox.com/u/63681173/loveinstagram/jquery.common.js
- blo198
- お礼率10% (7/67)
- JavaScript
- 回答数1
- ありがとう数0
- みんなの回答 （1）
- 専門家の回答
質問者が選んだベストアンサー
やり方は色々あると思いますのでその一例です。 （※アメブロで動くかは確認してません。） もし「.skinTitleArea」に対してcssで「display:none」としているならば それを解除し、opacityを「0」にしています。 また、animateのところでエラーが出ていましたので修正してあります。 「.skinTitleArea」の表示実行が速すぎるようなら、「delay（ミリ秒）」で調整してください。 いらない場合は.delay( 500 )部分ごと削除してください。 <!doctype html> <html lang="ja" xmlns="http://www.w3.org/1999/xhtml"> <head> <meta charset="utf-8" /> <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.0/jquery.min.js"></script> <script type="text/javascript"> //<![CDATA[ $(function(){ $(".skinTitleArea").css({display: "block", opacity: "0"}); $(".skinTitleArea").delay( 500 ).animate({opacity: 1}, 500); }); // ]]> </script> <style type="text/css"> .skinTitleArea { display: none; width: 200px; padding: 4px; border: solid 1px #ff0000; } </style> </head> <body> <div class="skinTitleArea"> ほげほげほげほげほげほげほげほげほげほげほげほげほげほげほげほげ </div> </body> </html>
