Jquery在幻燈片中循環次要動畫無法工作，除非它是第一張幻燈片

Question

我的項目的目標是製作幻燈片的圖像，並在每個圖片的頂部使用.animate作爲下拉菜單。但是，這隻適用於第一張幻燈片，其餘部分似乎不起作用。每張幻燈片都是一個div，在div裏面是div＃面板。

var $panel = $('#panel'); 
var $up = $("#up"); 
var $down = $("#down"); 

// up arrow 
$up.click(function() { 
    $panel.animate({ 
     top: '-180px', 
    }, 500); 
    $(this).fadeOut(250); 
    $down.fadeIn(250); 
    return false; 
}); 

// down arrow 
$down.click(function() { 
    $panel.animate({ 
     top: '0', 
    }, 500); 
    $(this).fadeOut(250); 
    $up.fadeIn(250);   
    return false; 
}); 

哦，循環代碼：

$('#base').cycle({ 
    fx:'scrollHorz', 
    prev: '#prev', 
    next: '#next', 
    timeout: 0, 
}); 

Answer 1

從它的外觀，好像你正在使用相同的ID爲每滴下來元素。每個元素都應該有自己的唯一ID。嘗試使用類的每個元素，而不是像，如：

var panel = $('.panel'); 
var up = $('.up'); 
var down = $('.down');