Question

我有这个CSS用于按钮动画，还有：

.btnliner {
    background: url(../images/btnbg.png) no-repeat center -105px;
    /* Fallback */
    display: block;
    text-align: center;
    font-family: Arial, sans-serif;
    font-size: 18px;
    color: #fff;
    text-decoration: none;
    text-shadow: 1px 1px 0px #000;
    -moz-border-radius: 25px;
    -webkit-border-radius: 25px;
    -o-border-radius: 25px;
    border-radius: 25px;
    background: url(../images/stripes.png) no-repeat 0px 0px, url(../images/btnbg.png) no-repeat center -8px;
    -moz-box-shadow: 2px 2px 10px #000;
    -webkit-box-shadow: 2px 2px 10px #000;
    -o-box-shadow: 2px 2px 10px #000;
    box-shadow: 2px 2px 10px #000;
    -moz-transition: all 1s ease-out;
    -webkit-transition: all 1s ease-out;
    -o-transition: all 1s ease-out;
    transition: all 1s ease-out;
}
.btnliner:hover {
    background: url(../images/btnbg.png) no-repeat center -5px;
    /* Fallback */
    background: url(../images/stripes.png) no-repeat 0px -200px, url(../images/btnbg.png) no-repeat center -8px;
    -moz-transition: all 0.5s ease;
    -webkit-transition: all 0.5s ease;
    -o-transition: all 0.5s ease;
    transition: all 0.5s ease;
}

这是我的JS：

$(document).ready(function () {
    $("#button1").on('click', function () {
        var targetEl = $(this).data('target');
        $.when($('.' + targetEl).siblings('a').fadeOut()).done(function () {
            $('.' + targetEl).fadeIn();
            $('button').css("border", "hidden");
            $("#button1").css("border", "3px solid red");
            $("#button1").css("backgroundimage", "url (../images/btnbg.png)", "!important");
        });
    });
});

$(document).ready(function () {
    $("#button2").on('click', function () {
        var targetEl = $(this).data('target');
        $.when($('.' + targetEl).siblings('a').fadeOut()).done(function () {
            $('.' + targetEl).fadeIn();
            $('button').css("border", "hidden");
            $("#button2").css("border", "3px solid red");
        });
    });
});


$(document).ready(function () {
   $("#button3").on('click', function () {
        var targetEl = $(this).data('target');
        $.when($('.' + targetEl).siblings('a').fadeOut()).done(function () {
            $('.' + targetEl).fadeIn();
            $('button').css("border", "hidden");
            $("#button3").css("border", "3px solid red");
        });
    });
});


$(document).ready(function () {
    $("#button4").on('click', function () {
        var targetEl = $(this).data('target');
        $.when($('.' + targetEl).siblings('a').fadeOut()).done(function () {
            $('.' + targetEl).fadeIn();
            $('button').css("border", "hidden");
            $("#button4").css("border", "3px solid red");
        });
    });
});

$(document).ready(function () {
    $("#button5").on('click', function () {
        var targetEl = $(this).data('target');
        $.when($('.' + targetEl).siblings('a').fadeOut()).done(function () {
            $('.' + targetEl).fadeIn();
            $('button').css("border", "hidden");
            $("#button5").css("border", "3px solid red");
        });
    });
});

$(document).ready(function () {
    $("#button5").on('click', function () {
        var targetEl = $(this).data('target');
        $.when($('.' + targetEl).siblings('a').fadeOut()).done(function () {
            $('.' + targetEl).fadeIn();
            $('button').css("border", "hidden");
            $("#button5").css("border", "3px solid red");
        });
    });
});

$(document).ready(function () {
    $("#button6").on('click', function () {
        var targetEl = $(this).data('target');
        $.when($('.' + targetEl).siblings('a').fadeOut()).done(function () {
            $('.' + targetEl).fadeIn();
            $('button').css("border", "hidden");
            $("#button6").css("border", "3px solid red");
        });
    });
});

$(document).ready(function () {
    $("#button7").on('click', function () {
        var targetEl = $(this).data('target');
        $.when($('.' + targetEl).siblings('a').fadeOut()).done(function () {
            $('.' + targetEl).fadeIn();
            $('button').css("border", "hidden");
            $("#button7").css("border", "3px solid red");
        });
    });
});

$(document).ready(function () {
    $("#button8").on('click', function () {
        var targetEl = $(this).data('target');
        $.when($('.' + targetEl).siblings('a').fadeOut()).done(function () {
            $('.' + targetEl).fadeIn();
            $('button').css("border", "hidden");
            $("#button8").css("border", "3px solid red");
        });
    });
});

$(document).ready(function () {
    $("#button9").on('click', function () {
        var targetEl = $(this).data('target');
        $.when($('.' + targetEl).siblings('a').fadeOut()).done(function () {
            $('.' + targetEl).fadeIn();
            $('button').css("border", "hidden");
            $("#button9").css("border", "3px solid red");
        });
    });
});

当我点击一个按钮时，背景上仍然有一个灰色阴影。我想要的是当我点击按钮时，css动画停止，我可以看到该按钮的背景图像，当我点击另一个按钮时，所有按钮都转到默认样式（灰色阴影）和只有我的按钮单击，显示背景，没有任何阴影。

Answer 1

这是DEMO

$(document).ready(function () {
    $("#button1").on('click', function () {
        var targetEl = $(this).data('target');
        $.when($('.' + targetEl).siblings('a').fadeOut()).done(function () {
            $('.' + targetEl).fadeIn();
            $('button').css("border", "hidden");
            $("#button1").css("border", "3px solid red");
            $("#button1").css("backgroundimage", "url (../images/btnbg.png)", "!important");
        });
    });
});

Answer 2

添加：

.btnliner:active {
//Put all your shadows in here and set them to 0
}

Answer 3

最简单的是：

$(document).ready(function () {
$('.btnliner').on('click', function () {
    var btn = $(this);
    var targetEl = $(this).data('target');
    $.when($('.' + targetEl).siblings('a').fadeOut()).done(function () {
        $('.' + targetEl).fadeIn();
        $('.btnliner').removeClass('active');
        btn.addClass('active');
    });
 });
});

和css：

.active {
    border: 3px solid red;
    background: url(http://s23.postimg.org/arpn52pnf/btnbg.jpg) no-repeat center -5px;
}

Final Answer

在活动时单击按钮的阴影（单击）

3 个答案: