0

我是 js 新手，对 jquery 的了解还不够，无法将其他人的解决方案操纵到我自己的代码中，所以我想我会问我自己的以获得具体答案。

我正在开发一个交互式车库应用程序，您可以在其中更改汽车和车轮的颜色。我有单独的颜色选择器，它们在舞台上（从底部）为汽车和车轮设置动画，但它们都在相同的位置。

基本上，当用户单击“更改汽车颜色”时，它会将汽车颜色选择器设置为动画，当他们单击“更改车轮颜色”时，它会隐藏汽车颜色选择器并为车轮颜色选择器设置动画。

话虽如此，我想在单击另一个选择器时将选择器返回到它们的原始位置，这样它们就不会一直在屏幕上滑动，并且用户可以根据需要在两个颜色选择器选项之间多次切换。

这是我正在使用的代码，任何帮助都会很棒：

$("#carcolor").click(function(){

    $("#colors2").hide();
    $("#colors1").show();
    $("#pink").animate({
        bottom:'+=200px'},1500);    
    $("#yellow").animate({
        bottom:'+=200px'},2000);
    $("#green").animate({
        bottom:'+=200px'},2500);
    $("#blue").animate({
        bottom:'+=200px'},3000);    
    $("#purple").animate({
        bottom:'+=200px'},3500);
    $("#red").animate({
        bottom:'+=200px'},4000);


$("#wheelcolor").click(function(){  

    $("#colors1").hide();
    $("#colors2").show();   
    $("#pink2").animate({
        bottom:'+=200px'},1500);    
    $("#yellow2").animate({
        bottom:'+=200px'},2000);
    $("#green2").animate({
        bottom:'+=200px'},2500);
    $("#blue2").animate({
        bottom:'+=200px'},3000);    
    $("#purple2").animate({
        bottom:'+=200px'},3500);
    $("#red2").animate({
        bottom:'+=200px'},4000);
4

1 回答 1

0

这很近吗？

我不确定您的标记看起来如何，所以我只是按照我想要的方式将它放在一起，并尝试简化一些事情。

编辑 虽然我的示例不完全匹配，但它确实说明了完成任务的更好方法，所以我将把它留在这里。

$('.box').each(function() {
    var box = $(this);
    var that = $(this).children('.colors');
    var head = $(this).children('h2');
    var speed = 200;
    head.on('click', function(){
        if(that.hasClass('on')) {
            that.slideUp(speed).children().stop().animate({bottom: '-30px'}, speed).end().removeClass('on');
        } else {
            $('.on').removeClass('on').slideUp(speed).children().attr('style','');
            that.slideDown(speed).addClass('on').children().each(function(i) {
                $(this).stop().animate({bottom: '+=30px'}, speed*i);
            });
        }
    });
});

做了一个小提琴：http: //jsfiddle.net/filever10/DGUeU/

编辑

为了使其按应有的方式工作，您应该真正重做整个事情。您的 html 是各种不稳定的，css 不支持 javascript，而 javascript 是冗长的方式。

我想我在这里工作，让我知道。 http://jsfiddle.net/filever10/y47wn/8/

于 2013-10-27T00:56:27.607 回答