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

Question

我正在尝试在单击时淡出蓝色圆圈标记。它适用于最初的几次点击，但之后标记不会淡出。我做错了什么？

这是一个演示。请寻找动画圆圈蓝色标记。

PS：我正在尝试使用.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);
    });
});

Answer 1

尝试将此部分移到“点击”功能之外：

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