Question

I’m using this jquery to display some information on hover:

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

I’m using this on the “Promotion Slider” WordPress plugin, and it works great. Only the client want the information to be shown on slide load, instead of on hover. The plugin I’m using has a “action hook” that is called on the slide load. The action hook is “promoslider_content”.

So how do I use “promoslider_content” action hook to trigger the animation instead of my current “hover” function?

Answer 1

I ended up solving this by editing the plugin (then changing the plugin name so they don’t update it and overwrite my customization). It’s not the best solution, but it worked.

promo_slider.js (starting at line 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 );
});