终于为客户提供了一个滚动菜单,现在希望它是一个 show() hide() 情况。除了像乐高积木一样使用它之外,我对 jquery 的了解还不足以做任何事情。
我的第一个想法是,“这很容易”我将动画更改为显示或隐藏。所以我尝试了:
if (idx > current) {
$current.show()
$next.hide()
}
elseif { ... }
任何人有任何快速指针?这是原始代码:
$(function() {
//caching
//next and prev buttons
var $cn_next = $('#cn_next');
var $cn_prev = $('#cn_prev');
//wrapper of the left items
var $cn_list = $('#cn_list');
var $pages = $cn_list.find('.cn_page');
//how many pages
var cnt_pages = $pages.length;
//the default page is the first one
var page = 1;
//list of news (left items)
var $items = $cn_list.find('.cn_item');
//the current item being viewed (right side)
var $cn_preview = $('#cn_preview');
//index of the item being viewed.
//the default is the first one
var current = 1;
/*
for each item we store its index relative to all the document.
we bind a click event that slides up or down the current item
and slides up or down the clicked one.
Moving up or down will depend if the clicked item is after or
before the current one
*/
$items.each(function(i){
var $item = $(this);
$item.data('idx',i+1);
$item.bind('click',function(){
var $this = $(this);
$cn_list.find('.selected').removeClass('selected');
$this.addClass('selected');
var idx = $(this).data('idx');
var $current = $cn_preview.find('.cn_content:nth-child('+current+')');
var $next = $cn_preview.find('.cn_content:nth-child('+idx+')');
/* ITEM SCROLLING */
/* DOWN THE LIST */
if(idx > current){
$current.stop().animate({'top':'-1000px'},600,'linear',function(){
$(this).css({'top':'1000px'});
});
$next.css({'top':'1000px'}).stop().animate({'top':'5px'},600,'linear');
}
/* UP THE LIST */
else if(idx < current){
$current.stop().animate({'top':'1000px'},600,'linear',function(){
$(this).css({'top':'1000px'});
});
$next.css({'top':'-1000px'}).stop().animate({'top':'5px'},600,'linear');
}
current = idx;
});
});
});