javascript - WordPress 插件中的 jQuery 图像 slider

Question

我正在尝试使用 WordPress 插件上的 jQuery animate 制作图像幻灯片。

这是我的自定义 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);
  });
});

我想制作一个单独的幻灯片效果，如 this而我最后滑动的只是图像的高度感谢您的帮助。

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