wordpress插件中的jQuery图像幻灯片

jQuery image slide in wordpress plugin

本文关键字：图像 幻灯片 jQuery 插件 wordpress      更新时间：2023-11-17

我正试图在wordpress插件上用jQuery制作一个图像幻灯片。

这是我在自定义JavaScript 中的代码

网站

 $(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);
  });
});

我想制作这样的个人幻灯片效果最后我的幻灯片刚好是图像的高度谢谢你的帮助。

网站在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);
    });
});
相关文章：