Question

我正在使用此jquery显示有关悬停的一些信息：

jQuery(document).ready(function() {
    jQuery('.promo_slider_wrapper').hover(function() {
            jQuery('.promo_slider_excerpt').animate({right: 0, opacity: 1}, 500 );
        },
        function() {
            jQuery('.promo_slider_excerpt').animate({right: -320, opacity: 1}, 500 );
    });
});

我在“促销滑块”Wordpress插件上使用它，效果很好。只有客户希望信息显示在幻灯片加载上，而不是悬停。我正在使用的插件有一个在幻灯片加载时调用的“动作挂钩”。动作钩子是“promoslider_content”。

那么如何使用“promoslider_content”动作钩子来触发动画而不是当前的“悬停”功能呢？

Answer 1

如果您不需要悬停部分，那么您应该能够只包含功能内容，这将立即运行。

jQuery(document).ready(function() {
    jQuery('.promo_slider_excerpt').animate({right: 0, opacity: 1}, 500 );
});

但是动画不会返回-320，这通常会在您将鼠标移出时发生。您可以设置某种类型的间隔计时器来执行此操作。

Answer 2

我最后通过编辑插件来解决这个问题（然后更改插件名称，这样他们就不会更新它并覆盖我的自定义）。这不是最好的解决方案，但它确实有效。

promo_slider.js（从第161行开始）：

// Add / Remove classes
currentItem.removeClass('current');
jQuery('.promo_slider_excerpt').animate({right: -260, opacity: 1}, 200 );
newItem.addClass('current');
currentSpan.removeClass('current');
newSpan.addClass('current');

// Fade in / out
currentItem.fadeOut('fast', function(){
newItem.fadeIn('fast');
jQuery('.promo_slider_excerpt').animate({right: 0, opacity: 1}, 500 );
});

使用jQuery插件钩子

2 个答案: