Еще одна проблема возврата анимации Jquery

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);
  • 0
    Вы также можете опубликовать HTML или создать скрипку, чтобы мы могли видеть, что происходит?
  • 0
    Это слишком долго, чтобы оставлять комментарии, и я никогда не использовал скрипку. Извините за нубишность. Что именно вам нужно знать? По сути, мне просто нужно, чтобы расположение div-ов сбрасывалось в исходное положение, если индикатор нажимается второй раз или если щелкает другой индикатор. Происходит следующее: если во второй раз нажать кнопку «изменить цвет автомобиля», элементы div снова оживут из своего текущего положения (переместив их вверх по экрану).
Показать ещё 2 комментария
Теги:
jquery-animate

1 ответ

0
Лучший ответ

это близко?

Я не был уверен, как выглядит ваша разметка, поэтому я просто собрал ее так, как хотел, и попытался упростить некоторые вещи.

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/

  • 0
    Не совсем, но мне нужно где-то там, ха-ха. Позвольте мне подписаться на скрипку и вернуться к вам с некоторым контекстом. еще раз спасибо
  • 0
    Да, я слышу тебя, и я ненавижу тратить время людей, поэтому извиняюсь за это. Я собрал скрипку, но я использовал кусочки вместо css для элементов, поэтому скрипка - это просто разбитые изображения, но вы можете понять из этого. По сути, вы нажимаете на середину img, и когда остальные анимируются в них, это два в крайнем правом углу, которые управляют селекторами цвета, которые вы увидите анимированными снизу вверх jsfiddle.net/dsighn/y47wn
Показать ещё 5 комментариев

Ещё вопросы

Сообщество Overcoder
Наверх
Меню