javascript - jQuery:使用动画在父 div 中显示文本

Question

我正在使用基本的 jQuery。我想在带有某种动画的 div 中显示文本，并为同一个 div 提供白色背景。这是我制作的起始代码:

<div class="square square1">
    <p class="toggle">some text</p> 
</div>    
<div class="square square2"></div>
<div class="square square3"></div>
<div class="square square4"></div>

..风格..

.square {
width:100px;
height:100px;
}
.toggle {
display:none; 
width:100px;
height:100px;
}

..和简单的 js.

$('.square1').click(function(){
   $('.toggle').slideToggle(300).addClass('white');
});

问题是我确定这不是在容器内显示文本的正确方式。切换文本时，div 会“跳跃”。

此外，是否有一些 jQuery 动画可以以“更好”的 Action 显示内容？切换太粗鲁了!

在 fiddle 上:http://jsfiddle.net/2pnxf4go/9/

Answer 1

试试这个

var activeDIV = document.querySelector("div");

activeDIV.addEventListener("click", toggleMe, false);

function toggleMe(e) {
    this.classList.toggle("toggle")
}

*{box-sizing: border-box; padding: 0; margin: 0}
.square {
    width: 100px;
    height: 100px;
    background: #ccc;
    margin: 4px;
    cursor: pointer;
    overflow: hidden
}

.square p{
    width: 100%;
    height: 100%;
    line-height: 100px;
    text-align:center;
    background: current-color;
    -webkit-transform: translateY(-100%);
    -moz-transform: translateY(-100%);
    transform: translateY(-100%);
    -webkit-transition: transform .3s ease, background .3s .3s ease; 
    -moz-transition: transform .3s ease, background .3s .3s ease; 
    transition: transform .3s ease, background .3s .3s ease 
}
.toggle p{
    background: white;
    -webkit-transform: translateY(0%);
    -moz-transform: translateY(0%);
    transform: translateY(0%)
}

<div class="square square1">
    <p class="toggle">some text</p> 
</div>    
<div class="square square2"></div>
<div class="square square3"></div>
<div class="square square4"></div>