jQuery sliderDown work but slideUp don't

Question

I wrote a simple slider with a help of SOF community. Now I'm trying to add to it some fancy animations. Slider can handle: horizontal and vertical sliding. I have problems with slideUp effect when slideDown works completly good. When I click icon for item to slideUp, next item is showing up without any animation.

My code:

self.nextItem = function()
{
    if(self.obj.activeElement.is(':last-child')) 
    {
        $('li.active', self.obj).removeClass('active');

        if(self.obj.settings.animation === "horizontal")
        {
            $('li', self.obj).first().toggle("slide", { direction: "left" }, 1000, function() {
                $(this).addClass('active').removeAttr("style")
            });
        }
        else
        {
            $('li', self.obj).first().slideUp('slow', function() {
                $(this).addClass('active').removeAttr("style")
            });
        }
    } 
    else 
    {
        self.obj.find("li").removeClass("active");

        if(self.obj.settings.animation === "horizontal")
        {
            self.obj.activeElement.next().toggle("slide", { direction: "left" }, 1000, function() {
                $(this).addClass('active').removeAttr("style")
            });
        }
        else 
        {
            self.obj.activeElement.next().slideUp('slow', function() {
                $(this).addClass('active').removeAttr("style")
            });
        }
    }
},

Every next and prev item is hidden when clicking next/prev pager icon. The whole code of slider (without animation support) is here. At first I didn't know that I will need to animate so item are showint/hiding by CSS (.active { display: block}) and becouse of that I have to remove inline style.

HTML is simple:

   <ul>
        <li></li>
        <li></li>
    </ul>

I use slideDown effect (other part of code) with it and it works good.

EDIT:

At first I thougt that including a whole code isn't a good idea so I've placed only part where I think is a problem. But if you want here is a full version:

var MiniSlider = function(objId, settings)
{
this.obj = $("#" + objId);
var self = this;

self.obj.settings = {
    items: $("ul li", self.obj).length,
    autoChangeTime: 8000,
    animation: 'horizontal'
};

if(settings instanceof Object)
{
    $.extend(self.obj.settings, settings);
}

self.obj.activeElement = null;

self.pagerNext = self.obj.find("i.next");
self.pagerPrev = self.obj.find("i.prev");



self.pagerNext.on("click", function() {

    self.obj.activeElement = $('li.active', self.obj);

    if(self.obj.settings.items > 0)
    {
        self.nextItem();
    }
});
self.pagerPrev.on("click", function() 
{
    self.obj.activeElement = $('li.active', self.obj);

    if(self.obj.settings.items > 0)
    {
        self.prevItem();
    }
});
self.obj.parent().on('mouseenter mouseleave', function(e) {
    if (e.type == 'mouseenter') 
    {
        $(this).addClass('stop');
    }
    else 
    {
        $(this).removeClass('stop'); 
    }
});

self.prevItem = function()
{
    if(self.obj.activeElement.is(':first-child')) 
    {
        self.obj.activeElement.removeClass('active');

        if(self.obj.settings.animation === "horizontal")
        {
            $('li', self.obj).last().toggle("slide", { direction: "right" }, 1000, function() {
                $(this).addClass('active').removeAttr("style")
            });
        }
        else
        {
            $('li', self.obj).last().slideDown('slow', "linear", function() {
                $(this).addClass('active').removeAttr("style")
            });
        }
    }
    else 
    {
        self.obj.find("li").removeClass("active");

        if(self.obj.settings.animation === "horizontal")
        {
            self.obj.activeElement.prev().toggle("slide", { direction: "right" }, 1000, function() {
                $(this).addClass('active').removeAttr("style")
            });
        }
        else
        {
            self.obj.activeElement.prev().slideDown('slow', "linear", function() {
                $(this).addClass('active').removeAttr("style")
            });
        }
    }
},
self.nextItem = function()
{
    if(self.obj.activeElement.is(':last-child')) 
    {
        $('li.active', self.obj).removeClass('active');

        if(self.obj.settings.animation === "horizontal")
        {
            $('li', self.obj).first().toggle("slide", { direction: "left" }, 1000, function() {
                $(this).addClass('active').removeAttr("style")
            });
        }
        else
        {
            $('li', self.obj).first().slideUp('slow', function() {
                $(this).addClass('active').removeAttr("style")
            });
        }
    } 
    else 
    {
        self.obj.find("li").removeClass("active");

        if(self.obj.settings.animation === "horizontal")
        {
            self.obj.activeElement.next().toggle("slide", { direction: "left" }, 1000, function() {
                $(this).addClass('active').removeAttr("style")
            });
        }
        else 
        {
            self.obj.activeElement.next().slideUp('slow', function() {
                $(this).addClass('active').removeAttr("style")
            });
        }
    }
},
setInterval(function() {
    if(self.obj.settings.items > 0 && !self.obj.parent().hasClass("stop"))
    {
        self.pagerNext.click();
    }
}, self.obj.settings.autoChangeTime);

};

CSS:

div div.block-content.mini-slider ul li {
    display:none;
}
.block-content.mini-slider ul li.active {
    display:block;
}

Answer 1

The problem is this:

self.obj.activeElement.next().slideUp('slow', function() {
      $(this).addClass('active').removeAttr("style")
});

SlideUp is for hiding elements, not for showing. This code clearly hides the next element. But the next element is already hidden. This code self.obj.activeElement.next().slideUp('slow' actually does nothing.

After hiding is finished, you add the active class to it to display as block. That's why it shows up without animation. Because your code to display it is actually:

$(this).addClass('active').removeAttr("style")