Question

我创建了一个简单的Jquery代码..

守则

<script type="text/javascript">
            $('#Button1').click(function (evt) {
                evt.preventDefault();
                $('#Textbox1').animate({ width: '300px', height: '75px' })
            })
           </script>

现在我想链接结果所以再次点击按钮我得到原始文本框尺寸

我在下面尝试了这段代码，但它不起作用。有什么建议吗？

<script type="text/javascript">
            $('#Button1').click(function (evt) {
                evt.preventDefault();
                $('#Textbox1').animate({ width: '300px', height: '75px' }) })
                .animate({ width: '100px', height: '10px' })
                });
           </script>

Answer 1

这个怎么样：

<script type="text/javascript">
    $('#Button1').click(function (evt) {
        evt.preventDefault();
        $('#Textbox1').animate({ width: '300px', height: '75px' }, function() {
            $('#Textbox1').animate({ width: '100px', height: '10px' });
        });
    });
</script>

这是使用第一个动画的complete回调函数来启动第二个动画。

或者，如果您不想“链接”动画，而是希望在第二次点击时执行相反的动画（这是切换，而不是链），试试：

<script type="text/javascript">
    $('#Button1').click(click1);

    function click1(evt) {
        evt.preventDefault();
        $('#Textbox1').animate({ width: '300px', height: '75px' }, function() {
            $('#Button1').unbind('click');
            $('#Button1').click(click2);
        });
    }

    function click2(evt) { 
        evt.preventDefault();
        $('#Textbox1').animate({ width: '100px', height: '10px' }, function() {
            $('#Button1').unbind('click');
            $('#Button1').click(click1);
        });
    }
</script>

示例：http://jsfiddle.net/52A3w/1

Answer 2

您希望在备用点击上执行两个不同的功能。在第一次单击时，您可以更改大小，然后在第二次单击时将其更改回原始大小。您可以使用toggle ^[docs]：

$('#Button1').toggle(function(evt) {
    evt.preventDefault();
    $('#Textbox1').stop().animate({ width: '300px', height: '75px' });
}, function(evt) {
    evt.preventDefault();
    $('#Textbox1').stop().animate({ width: '100px', height: '10px' });
});

更新： Here is a demo。显然有人不同意我的回答。这应该表明它有效。

Answer 3

类似的东西应该起作用

<script type="text/javascript">
           $('#Button1').click(function (evt) {
                evt.preventDefault();
             var button=$(this);
             if (button.hasClass('widecontent') {
                 $('#Textbox1').animate({ width: '100px', height: '10px' });
                  } else       
                {
                  $('#Textbox1').animate({ width: '300px', height: '75px' }) });
                }
       button.toggleClass('widecontent');
 });
</script>

Jquery按钮单击链接

3 个答案: