javascript - 相同类别的对象有时不会隐藏

我试图在单击时淡出蓝色圆圈标记。它仅在最初的几次单击中起作用，但之后标记不会消失。我做错了什么？

这是demo。请寻找动画的蓝色圆圈标记。

附言：我正在尝试淡化.marker类的对象。

var marker = $('.marker'),
    body = $('#movingBody'),
    dynamicbox = $('.dynamicbox'),
    dbleft = $('.dynamicbox.left').hide(),
    dbright = $('.dynamicbox.right').hide(),
    closeBtn = dynamicbox.find('.close');

marker.on('click', function() {
    var $this = $(this),
        rel = $this.attr('rel'),
        div = $(rel),
        img = $this.attr('href');

    marker.fadeOut(200);
    $('.dynamicbox .content div').hide();
    div.show();
    $(img).fadeIn();

    function animateOut(unit) {
        body.animate({
            'left' : unit
        }, 500, 'easeOutCirc');
    }

    if($this.hasClass('r')) {
        animateOut(0); dbright.fadeIn(200);
    } else {
        animateOut(258); dbleft.fadeIn(200);
    }

    closeBtn.on('click', function() {
        body.animate({
            'left' : 140
        }, 500, 'easeOutCirc', function() {
            marker.fadeIn(200);
        });
        $(img).fadeOut();
        dynamicbox.fadeOut(200);
    });
});

最佳答案

尝试将零件移至“点击”功能之外：

 closeBtn.on('click', function() {
     ...
 });