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

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