Сложности с созданием событий JQ?

Question

[PatrickAmara]

На данный момент я работаю над одним проектом, и в процессе выполнения возникло несколько вопросов по реализации определенных эффектов. Прошу вас показать мне рабочие методы, и по возможности объяснить принципы их действия.
1. Мне необходимо было что бы при клике на определенном(.burg-down1) элементе появлялся до этого скрытый блок(.burg-down).
Реализовал я это следующим образом

$(document).ready(function(){
    $(".burg-down1").click(function(){
        $(".burg-down").css({display:"block"});
      });

    
});

Но мне нужно что бы при повторном нажатии на блоке(.burg-down1) у меня исчезал блок(.burg-down), пытался это реализовать таким образом, но не сработало.

$(document).ready(function(){
    $(".burg-down1").click(function(){
        $(".burg-down").css({display:"block"});
      });
      $(".burg-down1").click(function(){
        $(".burg-down").css({display:"none"});
      });
  
});

Насколько я понимаю тут нужно создать условие, которое будет определять какое css свойство принадлежит .burg-down и в зависимости от полученных данных будет запускать код для разворачивания или сворачивания блока .burg-down. Но я не знаю как это сделать, и не знаю может быть существует более простой способ.

2. Существует так же задача создания элемента при нажатии на который цвет одного из блоков будет изменен. Я пытался сделать это таким образом, но никакого результата не получил.

$(document).ready(function(){
    $("#change-bg").click(function(){
        $(".Video-wrap").css({background:"#fff"});
      });

    
});

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

4. Мне нужен слайдер, плагин, или просто код, но абсолютно простой, из необходимых там событий мне нужно только пролистывание по нажатию на кнопки(левая и правая кнопка пролистывают в соответсвующие стороны)

Answer 1

[Роман]

1. Вам необходимо создать класс в цсс со свойством дисплей:Блок
Потом для элемента, который должен появится по клику с помощью Джейквири сделать хайд (скрываем до клика).
Теперь навешиваем на событие клика следующее

$(document).ready(function(){
    $(".burg-down1").click(function(){
        $(".burg-down").toggleClass('your_name');
      });
   
});

2. джейквири не понимает коротких объявлений. Хотите менять цвет фона, так и пишите .css({"background-color":"#fff"});

3. Используйте waypoints или ему подобное. Почитайте тут к примеру как использовать ruseller.com/lessons.php?rub=32&id=1626

4. Масса слайдеров. Просите у гугла и ответит он. А так, OWL Carousel

Comments

[Денис Бочков]

Только backgroundColor .

[Роман]

ГенераторКачества: так оба варианта валидны же
Только мой должен вписывать как ключ в формате строки (в " "), а ваш как простой ключ.

[PatrickAmara]

Роман: Не срабатывает, ваше решение, у меня. Вы не мог ли бы посмотреть не ошибся ли я в чем то.
$(document).ready(function(){
$(".burg-down").hide();

});
$(document).ready(function(){
$(".burg-down1").click(function(){
$(".burg-down").toggleClass('.burg-down');
});

});
.burg-down{
display: block;
}

[Роман]

PatrickAmara: а попробуйте .toggleClass() использовать .toggle()

а то у вас сейчас скриптом переопределяеется
.burg-down{
display: block;
}
т.е. у вас постоянно хайд для блока работает.

А так должно заработать. Я думаю :) А то уже запамятовал немного

Answer 2

[Денис Бочков]

1.

$(document).ready(function(){
$(".burg-down1").click(function(){
$(".burg-down").toggle();
});
});