jQuery image slide in wordpress

Question

私は、wordpressプラグインでjQueryアニメーションでイメージスライドを作成しようとしています。

これは私が最後にthis ANDIスライドは画像の高さだけ助けを おかげであるように、個々のスライド効果を作りたいカスタムJavaScriptで私のコード

website

$(function(){ 
    $('.esg-entry-cover').on('mouseover',function(){ 
    $('.esg-entry-media').find('img').animate({marginTop:($(this).find('img').height()-$(this).height())},1500) 
    }); 
    $('.esg-entry-cover').on('mouseleave',function(){ 
    $('.esg-entry-media').find('img').animate({marginTop: ''},1500); 
    }); 
}); 

です。

Answer 1

ウェブサイトはJavaScriptコンソールに次のエラーが出力さ：Uncaught TypeError: $ is not a function

これは$はjQueryのために定義されていないことを意味し、あなたはここで明示的にjQueryを使用する必要があります。したがって、$をすべてjQueryに置き換えると解決されるはずです。

編集

あなたがホバリングのみの画像をアニメーション化するために、あなたはmouseenter/mouseleaveでthisを使用する必要があります。これにより、現在の要素だけを変更することができます。

jQuery(function(){ 
    jQuery('.esg-entry-media').on('mouseenter',function(){ 
     jQuery(this).children('img').animate({marginTop:($(this).find('img').height()-$(this).height())},1500) 
    }); 

    jQuery('.esg-entry-media').on('mouseleave',function(){ 
     jQuery(this).children('img').animate({marginTop: ''},1500); 
    }); 
});