Question

我在SOF社区的帮助下写了一个简单的滑块。现在我试图添加一些奇特的动画。滑块可以处理：水平和垂直滑动。当slideDown完全正常工作时，我遇到了slideUp效果问题。当我点击要滑动的项目的图标时，下一个项目将显示，没有任何动画。

我的代码：

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

单击next / prev pager图标时，隐藏每个next和prev项。滑块的整个代码（没有动画支持）是here。起初我不知道我需要动画这样的项目是showint /隐藏CSS（.active {display：block}）因为我必须删除内联样式。

HTML很简单：

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

我使用slideDown效果（代码的其他部分）并且效果很好。

修改

起初我认为包括整个代码并不是一个好主意所以我只放置了我觉得有问题的部分。但如果你想在这里是一个完整版本：

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

问题在于：

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

SlideUp用于隐藏元素，而不是用于显示。这段代码清楚地隐藏了下一个元素。但是下一个元素已经隐藏。此代码self.obj.activeElement.next().slideUp('slow'实际上什么也没做。

隐藏完成后，将active类添加到其中以显示为块。这就是它没有动画就出现的原因。因为显示它的代码实际上是：

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

jQuery slideDown工作，但slideUp没有

1 个答案: