JQuery 延长容器的动画不起作用

Question

我想通过单击按钮使我的一个 div 的长度更长，但是 jquery 似乎不起作用。这是脚本。

<script type="text/javascript">
 $(document).ready(function(){

    function extendContainer() {
        $('#thisisabutton').click(function() {
            $('#one').animate({
            height: "200px"
            },
            300);
        });
    }

})
</script>

这是 html 按钮的代码

<div id="div1" id="buttons" >
    <ul class="actions">
        <li><input id="thisisabutton" type="button" onclick="extendContainer()" onclick="loadXMLDocTraditional()" value="Traditional" class="special"/></li>
    </ul>
</div>

这里是 css 以防万一。

#one .container {
        width: 50em;
        height: 22em; /* Height of the #one section*/
}

Answer 1

我猜 you want this :

function extendContainer() {
        $('#one .container').animate({
        height: "200px"
        },
        300);
}

当然，在您的代码中添加相关的 HTML 以使动画正常运行：

<div id="div1" id="buttons" >
    <ul class="actions">
        <li><input id="thisisabutton" type="button" onclick="extendContainer()" onclick="loadXMLDocTraditional()" value="Traditional" class="special"/></li>
    </ul>
    <div id="one">
      <div class="container">test</div>
    </div>
</div>

此外，您可以在jQuery中的click()事件和input中的onclick事件之间进行选择，但两者都没有用。

Answer 2

您不需要 onclick="extendContainer()" 属性或函数本身来使其工作，因为您在调用 extendContainer():[=12 时附加处理程序而不是执行操作=]

$(document).ready(function(){

    $('#thisisabutton').click(function() {
        $('#one').animate({
        height: "200px"
        },
        300);
    });

})

和

<div id="div1" id="buttons">
    <ul class="actions">
    <li><input id="thisisabutton" type="button" onclick="loadXMLDocTraditional()" value="Traditional" class="special"/></li>
    </ul>
</div>

应该够了

Answer 3

它不起作用，因为 onlick 方法只是应用一个侦听器，而不是调用您想要的方法。无论如何，您可以从输入元素中删除 onclick 属性（顺便说一下，您有两个，我不明白为什么），并且只使用这个：

$(document).ready(function(){
    $('#thisisabutton').click(function() {
        $('#one').animate({
            height: "200px"
        }, 300);
    });    
});

这应该有效。此外，您将此应用于我在您的 HTML 代码中看不到的元素（具有 id "one" - #one），因此您也必须创建它。

JQuery 延长容器的动画不起作用

JQuery animation to lengthen container not working

html

javascript

css

jquery

jquery-animate