Question

我有一个<div>，其中有不同的元素。

问题是，如果我触发jQuery .hide()，父<div>几乎立即隐藏（使用它的背景颜色），其他元素只是挂在“空气中”并稍微消失而消失，他们甚至有相互之间的延迟，就像一行中的所有元素一样，无法隐藏。

我已经乱搞了几个小时，转换是一样的，我无法在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小提琴的例子：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（）子元素隐藏延迟

3 个答案: