slideToggle的负边距不能按要求工作

我有一个div，我在一个隐藏的元素上使用了负边距，与slideToggle()一起显示。但是，负边距对元素没有影响，直到完全可见为止。有什么方法可以让元素在已应用负边界时出现？（这里有一个特定的原因，我在这里使用了一个负边距，这在我的代码示例中并不明显）。slideToggle的负边距不能按要求工作

$(function() { 
 
    $('.info').click(function() { 
 
    $('.more-info').slideToggle(500); 
 
    }); 
 
});

.info { 
 
    height:150px; 
 
    display:table-cell; 
 
    vertical-align:middle; 
 
    cursor:pointer; 
 
} 
 

 
.more-info { 
 
    margin-top:-30px; 
 
    display:none; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div class="info"> 
 
    View more + 
 
</div> 
 
<div class="more-info"> 
 
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce venenatis vehicula venenatis. Nunc at maximus erat. Sed sed vestibulum diam. Aliquam erat volutpat. Quisque semper mi nec finibus suscipit. Curabitur ac fringilla orci, vel semper massa. Aenean mattis vel libero ut vulputate. Nunc a vulputate libero. Praesent tristique dictum dictum. In consectetur, nisl in semper lacinia, ligula risus pharetra nisl, sit amet congue felis odio sed dolor. Nullam pharetra varius orci, non dapibus diam dapibus at. Donec felis urna, laoreet id blandit id, vestibulum vulputate eros. Phasellus nunc odio, cursus quis tempor nec, accumsan eu lectus.</p> 
 
</div>

来源

2017-04-20 user13286

就个人而言，我认为你的问题看起来比答案凉，因为它从中间，但无论向上滑动。 – TricksfortheWeb

@TricksfortheWeb哈哈，我其实也是这么想的，不幸的是客户端没有：P – user13286

可以使用translateY()代替margin

$(function() { 
 
    $('.info').click(function() { 
 
    $('.more-info').slideToggle(500); 
 
    }); 
 
});

.info { 
 
    height:150px; 
 
    display:table-cell; 
 
    vertical-align:middle; 
 
    cursor:pointer; 
 
} 
 

 
.more-info { 
 
    transform: translateY(-30px); 
 
    display:none; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div class="info"> 
 
    View more + 
 
</div> 
 
<div class="more-info"> 
 
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce venenatis vehicula venenatis. Nunc at maximus erat. Sed sed vestibulum diam. Aliquam erat volutpat. Quisque semper mi nec finibus suscipit. Curabitur ac fringilla orci, vel semper massa. Aenean mattis vel libero ut vulputate. Nunc a vulputate libero. Praesent tristique dictum dictum. In consectetur, nisl in semper lacinia, ligula risus pharetra nisl, sit amet congue felis odio sed dolor. Nullam pharetra varius orci, non dapibus diam dapibus at. Donec felis urna, laoreet id blandit id, vestibulum vulputate eros. Phasellus nunc odio, cursus quis tempor nec, accumsan eu lectus.</p> 
 
</div>

来源

2017-04-20 16:14:14

您可以使用相对位置

$(function() { 
 
    $('.info').click(function() { 
 
    $('.more-info').slideToggle(500); 
 
    }); 
 
});

.info { 
 
    height:150px; 
 
    display:table-cell; 
 
    vertical-align:middle; 
 
    cursor:pointer; 
 
} 
 

 
.more-info { 
 
    position:relative; 
 
    top:-30px; 
 
    display:none; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div class="info"> 
 
    View more + 
 
</div> 
 
<div class="more-info"> 
 
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce venenatis vehicula venenatis. Nunc at maximus erat. Sed sed vestibulum diam. Aliquam erat volutpat. Quisque semper mi nec finibus suscipit. Curabitur ac fringilla orci, vel semper massa. Aenean mattis vel libero ut vulputate. Nunc a vulputate libero. Praesent tristique dictum dictum. In consectetur, nisl in semper lacinia, ligula risus pharetra nisl, sit amet congue felis odio sed dolor. Nullam pharetra varius orci, non dapibus diam dapibus at. Donec felis urna, laoreet id blandit id, vestibulum vulputate eros. Phasellus nunc odio, cursus quis tempor nec, accumsan eu lectus.</p> 
 
</div>

来源

2017-04-20 16:17:47 Moutimedia

slideToggle的负边距不能按要求工作

回答

相关问题