显示/隐藏动画

Question

我有一个问题，希望你们能帮助我。 请检查我的 jsfiddle > myFiddle

如果您单击“详细信息”按钮，您将通过一个简单的动画看到有关该项目的更多信息。 您可以通过单击左上角的“十字”图标来关闭此详细信息，您将看到关闭动画。

我的问题： 当当前项目（容器）详细信息打开（并且我没有使用“十字”图标关闭详细信息）时，如果我单击其他项目“详细信息”按钮，第一个项目（容器）详细信息没有隐藏（使用动画）。

如果有人能帮忙，那就太棒了

谢谢

jQuery('.btn.desktop').click(function(){
                jQuery('.btn.desktop.active').not(this).removeClass('active');
                jQuery(this).addClass('active');

                jQuery('.direction-container.active').not(this).removeClass('active');
                jQuery(this).addClass('active');


                // If button has class active
                if (jQuery('.btn.desktop').hasClass('active')) {

                    // If button is active add class active to direction container
                    jQuery(this).parent().closest('.direction-container').addClass('active');

                    // If direction container has class active
                    if (jQuery('.direction-container').hasClass('active')) {

                        // Show details container
                        jQuery('.direction-container.active').find('.details-desktop').fadeIn(500);


                        // Scroll down direction container after 500ms
                        setTimeout(function () {    
                            jQuery('.direction-container.active').animate({scrollTop: '100px'}, 500);
                        }, 500);

                        // Show close button
                        setTimeout(function () {
                            jQuery('.direction-container.active').parent().find('.close-details-desktop').fadeIn(500);  
                        }, 1000);



                        // Hide details container
                        jQuery('.direction-container.active').parent().find('.close-details-desktop').click( function() {
                            jQuery('.direction-container.active').animate({scrollTop: '0px'}, 300);
                            setTimeout(function () {    
                                jQuery('.details-desktop').fadeOut(300);
                                jQuery('.close-details-desktop').fadeOut(500);
                            }, 300);
                            setTimeout(function () {    
                                jQuery('.direction-container, .btn.desktop').removeClass('active');
                            }, 500);
                        });


                    } else {
                    }

                } else {
                }
                return false;
            });

Answer 1

您不会将它们淡出。

jQuery('.direction-container.active').parent().find('.close-details-desktop').click( function() {

这只会为活动容器按钮创建一个单击处理程序。它不会触发点击。此外，它不应该存在于另一个点击处理程序的深处，因为它只会在点击 .btn.desktop 后才会变为活动状态

你的代码太复杂了，你自己很难。