Question

我有一个div，它会在点击时延伸它的高度。 jQuery代码如下所示：

$('.contact-click').click(function() {
    $('#rollout').animate({
        height: "375", 
    }, 500);
});

$('a.close').click(function() {
    $('#rollout').animate({
        height: "0", 
    }, 500);
});

我想要一个触发按钮而不是a按钮来打开和关闭div。但我不明白该怎么做。对于slide()函数，有一个触发选项，但不适用于动画。为什么？谢谢你的帮助

Answer 1

如果我理解了您的问题，要让HTML button点击运行上述代码，您只需要从a选择器中移除close：

$('.close').click(function() {

然后你需要在HTML中放两个按钮，并使用jQuery中定义的相关类：

<input type="button" class="close" value="Close" />
<input type="button" class="contact-click" value="Contact" />

Answer 2

<input type="Button" onClick="$('.contact-click').trigger('click');" value="Animate"/>
    /*
    Will call 
    $('.contact-click').click(function() {
        $('#rollout').animate({
            height: "375", 
        }, 500);
    });
    */
<input type="Button" onClick=" $('a.close').trigger('click');" value="Close"/>

    /*
    will call
    $('a.close').click(function() {
        $('#rollout').animate({
            height: "0", 
        }, 500);
    });
    */

Answer 3

或者你可以只使用一个按钮并使用切换。例如：

<input type="button" id="triggerMe" value="Open/Close" />

并像这样使用切换：

$('#triggerMe').toggle(function(){
    $('#rollout').animate({
        height: "375", 
    }, 500);
  },function(){
    $('#rollout').animate({
        height: "0", 
    }, 500);
  }
);

http://api.jquery.com/toggle/

超过n出！修改示例http://jsfiddle.net/Xq63U/

使用“触发器”按钮设置动画

3 个答案: