Jquery 循环幻灯片中的辅助动画不起作用，除非它是第一张幻灯片

Question

我的项目的目标是制作图像幻灯片，每个图像顶部都有一个下拉菜单，仅使用 .animate。然而，这仅适用于第一张幻灯片，在其余幻灯片上它们似乎不起作用。每张幻灯片都是一个 div，该 div 内部是 div #panel。

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');