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的負邊距不能按要求工作

回答

相關問題