最後に顧客用のスクロール メニューを取得し、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;
});
});
});