jquery next(）不起作用

我在这里把问题弄得一团糟。

http://jsfiddle.net/E9cUS/1/

JavaScript:

$('.top').click(function () {
    var thisPage = $(this).closest('.yesNoItem');
    $('.yesNoTick').stop().animate({"opacity" : 1},400, function () {
        thisPage.find('.no .top').stop().animate({"opacity" : 0},400, function () {
            $(this).css("display", "none");
        });
    });
});
$('.yesNoNext').click(function () {
    $(this).closest('.yesNoItem').stop().animate({"opacity" : 0},400, function () {
        //This isnt working? Please advise?
        $(this).next('.yesNoItem').stop().animate({"opacity" : 1},400);
    });
});

HTML:

<div id="stage">
    <div class="yesNoOuter">
        <div class="yesNoItem" style="opacity:1;">
            <div class="yesNoContainer yes">
                <div class="top">
                    <div class="yesNoTick"></div>
                </div>
                <div class="bottom">
                </div>
            </div>
            <div class="yesNoContainer no">
                <div class="top">
                    <div class="yesNoTick"></div>
                </div>
                <div class="bottom">
                    <p>Text 1</p>
                    <div class="yesNoNext">More</span>
                </div>
            </div>
        </div>
        <div class="yesNoItem">
            <div class="yesNoContainer yes">
                <div class="top">
                    <div class="yesNoTick"></div>
                </div>
                <div class="bottom">
                </div>
            </div>
            <div class="yesNoContainer no">
                <div class="top">
                    <div class="yesNoTick"></div>
                </div>
                <div class="bottom">
                    <p>Text 2</p>
                    <div class="yesNoNext">More</span>
                </div>
            </div>
        </div>
    </div>
</div>

​

我还放了一行不起作用的代码。

基本上它隐藏了我想要的元素，但不会在…中淡化下一个元素

有人能根据我的代码提出建议吗？非常感谢！