Перемещение div назад в исходное положение при закрытии раскрывающегося меню

Прежде всего, я хотел бы заявить, что сделал свое исследование, но все еще не могу найти решение.
Моя цель состоит в том, чтобы мяч перемещался влево по щелчку, а затем возвращался в исходное положение после того, как зритель снова щелкнул по мячу, чтобы закрыть его.Перемещение div назад в исходное положение при закрытии раскрывающегося меню

Я использую эти строки анимировать меню и мяч
(с помощью собрата StackOverflow члена)

jQuery(document).ready(function() { 
jQuery(".RXMENU").hide(); 

jQuery(".RXCLICK").click(function() { 
$(".ACTIVE").removeClass("ACTIVE"); 
$(this).addClass("ACTIVE"); 
    jQuery(this).next(".RXMENU").slideToggle(500); 
     jQuery(".RXCLICK").animate({ 
     right: "56" 
    }); 

}); 

});

Я попытался с помощью этого кода, чтобы переместить мяч назад//

jQuery(".RXMENU").hide(); 
jQuery(".RXCLICK").click(function() { 
     jQuery(".RXCLICK").animate({ 
     right: "-56" 
    }); 
});

Я полагал, что отрицательное значение для позиции будет иметь значение , но я был явно неправ. Смена «скрыть» на «шоу» имеет тот же результат, после того, как я щелкнул по мячу, чтобы закрыть меню, мяч смеется над tad, , но он не возвращается туда, где я бы хотел.

Описание: fiddle.

Мой вопрос: Как я могу заставить код работать? Какие функции необходимы для того, чтобы оживить мяч до его первоначальной позиции?

Вся помощь оценивается!

источник

2014-01-23 KXXT

Вы были запущены два раза функцию щелчка для того же объекта, в результате которого -56px + 56px = 0px = объект остается на месте.

В принципе, вы должны только отметить, когда мяч не перемещен, а затем переместите его или, если он уже перемещен, - затем переместите его назад. Правильно? Да, добавление «активного» класса в перемещенный шар может быть решением. С точки зрения простоты я использую идентификатор '$' для 'jQuery'. А вот то, что работает (просто скопировать и вставить его в JSFIDDLE примере):

(function(){ 

    $(".RXMENU").hide(); 
    $(".RXCLICK").click(function() { 
     if ($(this).hasClass('ACTIVE')){ 
      $(".RXMENU").slideToggle(500); 
      $(this).animate({right: "-=56px"},'slow').removeClass('ACTIVE'); 
     } else { 
      $(".ACTIVE").removeClass("ACTIVE"); 
      $(this).next(".RXMENU").slideToggle(500); 
      $(this).addClass("ACTIVE").animate({right: "+=56px"},'slow'); 
     } 
    }); 

})();

источник

2014-01-23 23:39:32 Hristo

Да, конечно, вы можете использовать глобальную переменную состояния, а ACTIVE класса ... Но я предпочитаю придерживаться к потому что информация о том, активен или нет объект, остается внутри объекта (закрытие вроде). – Hristo

Чтобы быть полностью честным, я понятия не имею, что это значит. (Я вообще не испытываю в jQuery и т. Д.). Но код, который вы предоставили, исправил еще одну проблему, и я принял ваш ответ. Очень ценим! – KXXT

Вы абсолютно правы, глобальная область была плохой ошибкой. Я переместил его в закрытие. BTW: @keilowe вы можете принять только один ответ. Приняв этот второй, вы случайно удалили его из моего.) Но здесь нет аргументов, просто чтобы вы знали, keilowe. – pid

У вас было 2 события, связанные с событием click. Только один достаточно:

jQuery(document).ready(function() { 
    var moved = false; 

    jQuery(".RXMENU").hide(); 
    jQuery(".RXCLICK").click(function() { 
     $(".ACTIVE").removeClass("ACTIVE"); 
     $(this).addClass("ACTIVE"); 
     jQuery(this).next(".RXMENU").slideToggle(500); 

     jQuery(".RXCLICK").animate({ 
      right: moved ? "0" : "56" // move right by 56 pixels relative to original position 
     }); 
     moved = !moved; // toggle state 
    }); 
});

источник

2014-01-23 23:20:40 pid

Перемещение div назад в исходное положение при закрытии раскрывающегося меню

ответ

Смежные вопросы