Jquery toggle animation?

Question

[ton1_rose]

Немного представления.
Блок поделен на 2 части левая и правая.
Слева элементы списка, справа картинки свернутые в один блок с абсолютным позиционированием, представляют из себя некий сэндвич )
Выглядит это так
Логика следующая:
По нажатию на один из элементов списка

<li><a id="lin_lay_1" onclick="dev_clicker1();">Замена корпуса</a></li>

Первый слой сэндвича [.dev_layer1] поднимается на 80px.

click = 1;
function dev_clicker1(){
    if(click){
        $(".dev_layer1").animate({
            top: "-80px",
        }, 500);
        $(".dev_layer1").css({zIndex: "5"}, 500);
        click = 0;
    }
    else
    {
        $(".dev_layer1").animate({top: "0"}, 500);
        click = 1;
    }
}

На текущий момент при нажатии на второй элемент списка

<li><a id="lin_lay_2" onclick="dev_clicker2();">Замена какой то ху***</a></li>

поднимается второй слой сэндвича <li class="dev_layer2"><img src="#"></li> , однако первый не опускается.

Задача состоит в том, чтобы первый слой опускался при нажатии на второй элемент списка или любой другой всего 6 элементов в списке также как и 6 слоев в сэндвиче.

з.ы. junior. кусок js в данном случае работает только одного элемента, тоесть его нужно скопировать 6 раз и поменять классы с id, как можно этого избежать в данном примере ?
Спасибо

Comments

[Dark Hole]

Да киньте на JSFiddle, мы вам не браузер, что бы в уме визуализировать.

[ton1_rose]

Dark Hole что конкретно не понятно ?
на скриншотах визуализация видна
по сути нужно скрипт немного подредачить, чтобы при нажатии на второй элемент опускался первый.
и все.

[Andy Developer]

это не скрипт, это пиндец какой-то. еще и 6 раз повторять одно и то-же)

должно быть что-то вроде этого....

$('.link').on('click', function(e){
      e.preventDefault();
      var layerId = $(this).attr('id');
      $(layerId).toggleClass('hide');
});

ну и css соответствующие.

был бы на jsfiddle, дали бы работающий вариант, возможно.

[ton1_rose]

Ок, запилю завтра

[Dark Hole]

ton1_rose: живой пример. Мы, при изменении этого "абстрактного" кода, как его проверять должны?)

[ton1_rose]

Dark Hole Umbrella Coders @twobomb
Ребят запили это дела на jsfiddle прошу сильно не пинать за быдло код.
буду очень признателен если дадите рабочий вариант.
это мой сказать первый опыт написания на jquery
любая критика приветствуется!

[ton1_rose]

twobomb

Answer 1

[twobomb]

Ты типа такого что-то делаешь?

Comments

[ton1_rose]

twobomb Очень похоже, только здесь больше на слайдер вертикальный похоже.
а мне нужно, чтобы картинки были с абсолютным позиционированием, и при нажатии определенная картинка поднималась на 80px, при нажатии на второй пункт меню, первая опускалась и вторая поднималась

[twobomb]

ton1_rose: Вот такое чтоли?

[ton1_rose]

twobomb: Да, это оно ! спасибо бро !

[ton1_rose]

twobomb Привет, помоги пожалуйста, при переносе на локальный сервер или vps js почему то не отрабатывает,
код обернут
$(document).ready(function() {
})
jquery последний стоит
Пробовал по разному сделать но не получается, не можешь подсказать в чем может быть причина?
Посмотреть можно здесь : nj.pa.infobox.ru

[twobomb]

ton1_rose: Ошибки есть какие-то? Jquery Должен быть подключен как самый первый скрипт.
И еще редко, но проблема может быть именно в последней версии Js. Я обычно использую 1.9.1

[ton1_rose]

В консоли каких либо ошибок нет,
При этом в DOM при нажатии на элемент списка в jsfiddle видно что значения меняются здесь: prntscr.com/fsitls
на локальном сервере или впс этого не происходит, выводил алерты в функции отрабатывают везде кроме после этого куска кода:

if($(e).position().top == 0 && $(el).position().top != 0){
                    alert('123');

jquery 1.9 подключаю в футере prntscr.com/fsivco , пробовал еще в результат один и тот же((

[twobomb]

ton1_rose: Попробуй вставить в конец функции onload ну загрузки страницы где все прописывается этот код. Должен вылететь Alert с "Есть элемент с нулевой позицией". Еще открой консоль и посмотри там выпишем все позиции top. Они должны быть одна 0 и остальные по 500px;

$("#main #images img").each(function(i,e){
                if($(e).position().top == 0)
                alert("Есть элемент с нулевой позицией!");
                console.log($(e).position().top);
                });

[ton1_rose]

twobomb: Вставил этот кусок, не знаю на сколько правильно, проверь пожалуйста: https://jsfiddle.net/stnpwr/zepsxzm0/
ну пробовал по разному в любом случае алерт зафиксить не удалось, в консоли появились следующие строки: prntscr.com/fsl41i

[twobomb]

ton1_rose: Поменяй

if($(e).position().top == 0 && $(el).position().top != 0)

на

if($(e).position().top == 800 && $(el).position().top != 800){

Ну все равно нужно будет переделывать.