0
我在SOF社區的幫助下編寫了一個簡單的滑塊。現在我試圖添加一些花哨的動畫。滑塊可以處理：水平和垂直滑動。當slideDown完美運行時，我遇到了slideUp效果的問題。當我點擊滑動項目的圖標時，下一個項目不顯示任何動畫。jQuery sliderDown工作但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項目被隱藏。滑塊的整個代碼（沒有動畫支持）是here。起初，我不知道我需要動畫，所以項目是通過CSS（.active {display：block}）showint/hide並且因爲我必須刪除內聯樣式。
HTML很簡單：
<ul>
<li></li>
<li></li>
</ul>
我用了slideDown效果（其它代碼的一部分）與它和它的作品好。
編輯：
起初我thougt是包括整個代碼是不是一個好主意，所以我已經放在只有當我認爲這是一個問題的一部分。但是，如果你想在這裏是一個完整版本：
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;
}
爲了幫助你應該採取很多步驟。你甚至不包括整個代碼，更不用說不準備玩小提琴了。沒意思。 – dfsq
現在完整版。顯示您的興趣，並請幫助:) –