在点击时收缩(使用jQueryUI反弹效果)[英] Shrinking On Click (using jQueryUI bounce effect) 本文翻译自  user889205  查看原文  2011-09-16  655    css/

时间:2022-01-26 20:22:13

UPDATE: This has been fixed as of 1.9 of jQueryUI (http://bugs.jqueryui.com/ticket/7725).

更新:这已被修正为jQueryUI的1.9 (http://bugs.jqueryui.com/ticket/7725)。

DEMO: http://jsfiddle.net/FeaMg/10/

演示:http://jsfiddle.net/FeaMg/10/

I can't figure out why the button shrinks whenever I click on it.

我不明白为什么每次我点击按钮时按钮就会收缩。

I need it to use a percentage for width, it works just fine when I set the width to a pixel amount.

我需要它对宽度使用百分数,当我将宽度设置为一个像素量时,它可以正常工作。

Any ideas what I can do to stop this from happening?

我能做些什么来阻止这一切的发生?

Thanks!

谢谢!

1 个解决方案

#1


3  

This works :)

如此:)

$(document).ready(function()
{
    //When button is clicked
    $('.menuButton').click(function()
    {
        $(this).css('width', $(this).width());
        //Make the button bounce
        $(this).effect('bounce', { times:3 }, 300);
    });
});

Fork: http://jsfiddle.net/ynAHy/

叉:http://jsfiddle.net/ynAHy/


$(document).ready(function()
{
    //When button is clicked
    $('.menuButton').click(function()
    {
        $(this).css('width', $(this).width());
        //Make the button bounce
        $(this).effect('bounce', { times:3 }, 300, function(){
            $(this).css('width', '50%');
        });
    });
});

Using the callback of the effect function as mentioned here: http://ui-dev.jquery.com/demos/effect/ UPDATE: http://jsfiddle.net/dRRhE/

使用这里提到的effect函数的回调:http://ui-dev.jquery.com/demos/effect/ UPDATE: http://jsfiddle.net/dRRhE/

#1


3  

This works :)

如此:)

$(document).ready(function()
{
    //When button is clicked
    $('.menuButton').click(function()
    {
        $(this).css('width', $(this).width());
        //Make the button bounce
        $(this).effect('bounce', { times:3 }, 300);
    });
});

Fork: http://jsfiddle.net/ynAHy/

叉:http://jsfiddle.net/ynAHy/


$(document).ready(function()
{
    //When button is clicked
    $('.menuButton').click(function()
    {
        $(this).css('width', $(this).width());
        //Make the button bounce
        $(this).effect('bounce', { times:3 }, 300, function(){
            $(this).css('width', '50%');
        });
    });
});

Using the callback of the effect function as mentioned here: http://ui-dev.jquery.com/demos/effect/ UPDATE: http://jsfiddle.net/dRRhE/

使用这里提到的effect函数的回调:http://ui-dev.jquery.com/demos/effect/ UPDATE: http://jsfiddle.net/dRRhE/