javascript - 使用 javascript 和 css 过渡扩展 div

Question

我有一个部分，其中包含一些文本，当您单击它时我想将其动画化。这是下面的jsfiddle链接，html和css非常简单。谁能向我解释为什么它不起作用？

http://jsfiddle.net/jtKuZ/9/

我的 javascript 代码如下所示：

function show-hide(element)
{
    var classname = document.getElementById(element).className;
    if (classname == "hidden")
        document.getElementById(element).className = "visible";
    else
        document.getElementById(element).className = "hidden";
}

我的 HTML 中有这个：

<div id="container">
<div id="content" class="hidden" onclick="show-hide('content');">
Lorem ipsum dolor sit amet...
</div>
</div>

Answer 1

为此，我更喜欢 jQuery：

它使您的生活更轻松：

$('#content').on('click', function() {
    $(this).toggleClass("visible");

    if($(this).is('.visible'))
        $(this).animate({left: 0}, 1000);
    else
        $(this).animate({left: '490px'}, 1000);
});

http://jsfiddle.net/Recode/jtKuZ/14/