WordPressでjQuery ※animate( )が動かない

Question

WordPressの初心者です。

WordPressでjQueryを使用しようと思い、
ネットで試行錯誤しながら作業を行っていたのですがうまくいきません。

《header.php》

<?php wp_head(); ?>はそのままで、

特に<?php wp_deregister_script(); ?>でWordPressに元からあるjQueryを
打ち消していません。

《functions.php》

function my_scripts_method() {

wp_enqueue_script('ajaxgoogleapiscom', 'https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js', array(), '1.0', true);
wp_enqueue_script('script', get_bloginfo('template_url') . '/js/script.js', array('ajaxgoogleapiscom'), '1.0', true);
}
add_action( 'wp_enqueue_scripts', 'my_scripts_method' );

CDNでjQuery本体、外部ファイルscript.jsを読み込むようにしています。

《script.js》

jQuery(function( $ ){
$(function(){
$('.one').on('mouseover',function(){
$(this).css({'color':'red'});
});
});
})(jQuery);

外部ファイルで$を使いたいので、カプセル化しています。

以上のように記述していて、
cssメゾットではしっかり赤色に変化してくれるのですが、
animateメゾットでは変化してくれません。

jQuery UIもWordPressに最初から含まれているとのことですが、
改めて何か関数を記述して読み込む必要があるのでしょうか？？

ご教授お願い致しますm(_ _)m

Answer 1

特にプラグインを入れていないjQueryでは、色をアニメーションさせることはできません。

色を.animate()したい場合は、jQuery UIや、それ専用のプラグインなどが必要になります。

あと、IE9以下で動かなくていいなら、ブラウザネイティブのCSS Transitionを使うのも1つの方法です。

（追記…元の質問を一部読み落としていました）
おそらくですが、後から再度jQueryを読み込んだために、jQuery UIがロードされていないものが呼び出されているのではないかと思います。jQueryをCDNから読み込みたいのであれば、UIともどもWordPress標準での読み込みを止めて、jQuery本体とUIの両方をCDNなりで手動読込するしかないでしょう。

Comments

[退会済みユーザー]

ありがとうございます！！