loop through img elements and randomly apply slide effects (up, down, left, right)

Question

I have the following code where I loop through img elements and want to randomly apply slideUp(), slideDown(), slideLeft() and slideRight() effects on them:

    var sliderEffects = ["slideUp", "slideDown", "slideLeft", "slideRight"];
    function slideLeft(){
        console.log("slide left");
    }
    function slideLeft(){
        console.log("slide right");
    }
    function randomFrom(items) {
        return items[Math.floor(Math.random()*items.length)];
    }
    // console.log(randomFrom(effects));
    $c.each(function(){
        $(this).find('img:gt(0)').hide();

        setInterval(function () {           
            $(this).find(':first-child')
             [randomFrom(sliderEffects)]()
             .next('img')
             .fadeIn()
             .end()
             .appendTo(this)
         }.bind(this), 3000 + Math.random()*4000); // 4 seconds
    });

with slideUp() and slideDown() it works fine, as they are jQuery methods. The problem occurs when i try to call my methods: slideLeft() and slideRight(). I tried extending element object to add my properties:

jQuery.fn.extend({
      slideLeft: function() {
            console.log("slide left");
      },
      slideRight: function() {
            console.log("slide right");
      },
    });

So, any ideas on how I can execute different callbacks randomly?

Answer 1

So, here is what worked for me ^_^

var sliderEffects = ["myslideUp", "slideLeft", "slideRight", "myslideDown"];


(function($) {
    $.fn.slideLeft = function() {  
        return this.animate({left:jQuery(this).width()},1000) };
})(jQuery);

(function($) {
    $.fn.slideRight = function() {  
        return this.animate({left:-(jQuery(this).width())},1000) };
})(jQuery);

(function($) {
    $.fn.myslideDown = function() {  
        return this.animate({top:(jQuery(this).height())},1000) };
})(jQuery);

(function($) {
    $.fn.myslideUp = function() {  
        return this.animate({top:-(jQuery(this).height())},1000) };
})(jQuery);