.hide() 子元素延迟隐藏

Question

我有一个 <div>，里面有不同的元素。

问题是，如果我触发 jQuery .hide()，父元素 <div> 几乎立即隐藏（使用它的背景颜色），其他元素只是挂在 "the air" 中并消失稍有延迟，它们之间甚至还有延迟，就像所有的元素排成一条直线，一下子躲不掉。

我已经弄乱了 CSS 几个小时，转换是相同的，我无法在 jsFiddle 中复制这个问题。

可能是什么问题？

<div class="map-marker-wrapper">
    <div class="map-marker-container">

        <div class="arrow-down"></div>

        <img src="' . $marker_thumbnail . '" />

        <div class="content">
            <a href="' . $marker_permalink . '">
            <h5 class="title">' . $marker_title . '</h5>
            </a>' .
            $marker_price . '  
            <div class="more-content">
                <span>' . $marker_size . ' </span>
                <span> ' . $marker_price. ' </span>
            </div>
        </div>

    </div>
</div>

removeMarkers();

//Remove map markers and marker cluster
function removeMarkers() {

    for( i = 0; i < newMarkers.length; i++ ) {

        markers[i].setMap( null );

        //Close infoboxes
        if ( markers[i].infobox.getVisible() ) {

            markers[i].infobox.hide();
        }
    }

    if ( cluster ) { 

        cluster.clearMarkers();
    }

    markers = [];
    newMarkers = [];
    bounds = [];
}

Answer 1

你可以这样试试

$("div").hide("slow");

更多参考：

http://api.jquery.com/hide/

Answer 2

使用

e.stopPropagation();

避免隐藏父元素

js 示例 fiddle：https://jsfiddle.net/t8Lnsux5/5/

$(".more-content").click(function(e){
e.stopPropagation();
  $(this).fadeOut('slow');
});

$(".content").click(function(e){
e.stopPropagation();
  $(this).fadeOut('slow');
});

Answer 3

将 markers[i].infobox.hide(); 更改为 jQuery( '.infoBox' ).hide(); 即可解决问题。

我不确定它是否有任何影响（性能或其他）但我想时间会证明一切。

.hide() 子元素延迟隐藏

.hide() child elements hide with delay

html

javascript

css

jquery

hide