jquery动画按钮问题有帮助吗?

时间:2011-04-01 17:11:04

标签: javascript jquery html

http://jsfiddle.net/B2rdD/3/

我已经使用HTML创建了25个按钮,并且我已经编写了jquery代码,当用户将快速单击任何按钮时,所有按钮立即发光但现在上面代码中的问题是当我单击按钮时它第一次发光所有25个按钮,但第二次它没有发生。

我的目标是,如果我快速点击任何按钮,所有按钮应该再次亮起,然后快速再次按下

任何人都可以帮我这样做吗?

2 个答案:

答案 0 :(得分:1)

已获得最终修正:http://jsfiddle.net/B2rdD/29/

var $button = $(':button');

$button.click(function() {

    $button.stop(true,true).animate({

        'background-color': '#ADDFFF',
        opacity: 0.4

    }, 500, function() {

        $button.animate({

            'background-color': '#6DA6E2',
            opacity: 1

        }, 500) 

    });

});

$button.hover(function() {

    $(this).css({'background-color' : '#FFFFFF', 'color' : '#6DA6E2'});

}, function(){

    $(this).css({'background-color' : '#6DA6E2', 'color' : '#FFFFFF'});

});

首先,为了保持一致性,我将输入修改为所有具有唯一ID的输入。我也修改了你的CSS。现在jQuery我重新考虑并添加了悬停技术。首先,您想要管理动画。每次用户单击按钮时,您都不希望它们排队,因此.stop(true,true)。第一个true表示清除排队的动画,第二个表示跳转到动画结尾。就悬停而言,这只是一种简单的.hover()方法。

答案 1 :(得分:1)

试试这个。不知道你的发生了什么:

$(document).ready(
    function(){
        $(':button').click(

            function(){
                $(':button')
                    .animate({'background-color':'#ADDFFF',opacity: 0.4},500)
                    .animate({'background-color':'#ADDFFF',opacity: 1},500)


                    });


                 });