Я новичок в 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);
это близко?
Я не был уверен, как выглядит ваша разметка, поэтому я просто собрал ее так, как хотел, и попытался упростить некоторые вещи.
EDIT, хотя мой пример не подходит идеально, он иллюстрирует лучший способ выполнить задачу, поэтому я оставлю ее здесь.
$('.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 - все виды wonky, css не помогает javascript, и javascript - путь к подробному.
Я думаю, что он работает здесь, дайте мне знать. http://jsfiddle.net/filever10/y47wn/8/