Непонятки c jquery

@diargon3454 · Регистрация: 30.09.2013

Author24 — интернет-сервис помощи студентам

1) Почему у меня не работает css3 анимация?

Javascript

$(function () {
    var $info_panel = $('.info_panel');
    var $el2 = $('.el2');
        $('#show_info_panel').click(function(e) {
            $info_panel.toggleClass('slide_panel');     
            $el2.toggleClass('slide_content');
     });
 })

CSS

.info_panel {
    height: 100%;
    width: 400px;
    background-color: #565656;
    position: absolute;
    right: -400px;
    margin: auto;
    -webkit-transition: right .5s linear;
    -moz-transition: right .5s linear;
    -ms-transition: right .5s linear;
    -o-transition: right .5s linear;
    transition: right .5s linear;
}
.el2 {
    width: 100%;
    position: absolute;
        -webkit-transition: right 0.6s linear;
    -moz-transition: right 0.6s linear;
    -ms-transition: right 0.6s linear;
    -o-transition: right 0.6s linear;
    transition: right 0.6s linear;
}
.slide_panel {
    right: 0;
}
.slide_content {
    right: 20%;
}

2) Хочу сделать переход по категориям. (Ну видели, наверное, такие сайты). У меня почему-то после перехода на следующую страницу блокируется скролл.

Javascript

 $(window).scroll(function() { 
    if($(this).scrollTop() >= $("#Page_1").offset().top/2){
       var scroll_page_2 = $('#Page_2').offset().top;
        $(document).scrollTop(scroll_page_2);
    }
    if($(this).scrollTop() <= $("#Page_1").offset().top/2){
       var scroll_page_1 = $('#Page_1').offset().top;
        $(document).scrollTop(scroll_page_1);
    }
});

3) Как сделать так, чтоб если тыкаю в место определённого дива (назовём его главным) убирался другой див (назовём его панелью). Просто проблема в том, что кнопка по которой показывается панель (использую toggleCLASS) находится в главном диве. И получается, что тыкая на кнопку я тыкаю и в главный див. Я незнаю как. Додумался только жо этого

Javascript

$(function () {
    var $info_panel = $('.info_panel');
    var $el2 = $('.el2');
        $('#show_info_panel').click(function(e) {
            $info_panel.toggleClass('slide_panel');     
            $el2.toggleClass('slide_content');
     });
 })

Ну и получается что сначала я кликаю по кнопке (которая перключает toggle), но и одновременно я тыкаю и в главный див. И toggle возвращается в начальное значение.
Вот мой работающий код (чисто кнопка):

Javascript

$(function () {
     var $info_panel = $('.info_panel');
     $('#show_info_panel').click(function(e) {
         $info_panel.toggleClass('slide_panel');
     });
 })

@Armi · 20.04.2015, 15:53

Сообщение от diargon3454

1) Почему у меня не работает css3 анимация?

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

CSS

.el2 {
top:200px;
right:0px; // добавил
    width: 100px;
    position:absolute;
        -webkit-transition: right 0.6s linear;
    -moz-transition: right 0.6s linear;
    -ms-transition: right 0.6s linear;
    -o-transition: right 0.6s linear;
    transition: right .6s linear;
   
}

@diargon3454 · 20.04.2015, 18:15 **[ТС]**

Добавил начальные значения - не помогло. Вот скидываю сайт. Файл Index.html.

@Armi · 20.04.2015, 18:48

Правый блок двигается а левый надо чтобы класс .slide_content находился ниже класса .el2 в css файле или использовать !important иначе он его не перебивает по приоритету.

@diargon3454 · 20.04.2015, 18:56 **[ТС]**

Если я всё правильно понял, тогда вот так должно быть:

CSS

.el2 {
    width: 100%;
    position: relative;
        -webkit-transition: right 0.6s linear;
    -moz-transition: right 0.6s linear;
    -ms-transition: right 0.6s linear;
    -o-transition: right 0.6s linear;
    transition: right 0.6s linear;
}
.slide_panel {
    right: 0;
}
.slide_content {
    right: 20% !important;
}

Но это не помогает

@Armi · 20.04.2015, 19:05

CSS

.el2 {
 
right:700px;
    width: 100%;
    position: relative;
        -webkit-transition: right 0.6s linear;
    -moz-transition: right 0.6s linear;
    -ms-transition: right 0.6s linear;
    -o-transition: right 0.6s linear;
    transition: right 0.6s linear;
}

Найдите отличие о чем я вам говорил в посте выше.

@diargon3454 · 20.04.2015, 19:19 **[ТС]**

Мммм. Спасибо. Заработало.

Добавлено через 7 минут
Хотелось узнать ответ на остальные вопросы

@Armi · 20.04.2015, 19:52

Желательно под каждый вопрос отдельную тему по правилам форума. И 3 вопрос объясните подробнее с html кодом а то не понятно, что у вас там происходит.

@diargon3454 · 20.04.2015, 19:56 **[ТС]**

Сообщение от Armi

Желательно под каждый вопрос отдельную тему по правилам форума.

Хорошо. Сейчас создам соответсвующие темы.

@diargon3454 · 18.06.2015, 01:46 **[ТС]**

Почему-то перестало работать на одном элементе.

CSS

.el2 {
    position: absolute;
       right:0;
                -webkit-transition: right 0.3s linear;
    -moz-transition: right 0.3s linear;
    -ms-transition: right 0.3s linear;
    -o-transition: right 0.3s linear;
    transition: right 0.3s linear;
}
.el3 {
    position: absolute;
       right:0;
                -webkit-transition: right 0.3s linear;
    -moz-transition: right 0.3s linear;
    -ms-transition: right 0.3s linear;
    -o-transition: right 0.3s linear;
    transition: right 0.3s linear;
}

Javascript

$('.el1').click(function(e) {
            e.stopPropagation();
            $el2.toggleClass('slide_content');
            $el3.toggleClass('slide_content');
     });

Вроде же всё одиноково. Не подскажите почему не работает? Что я забыл написать?

@diargon3454 · 20.06.2015, 22:04 **[ТС]**

Попробовал сделать на простом примере. Снова не получилось. Можете мне объснить что у меня не так? Что я упускаю?

HTML5

<!DOCTYPE html>
<html>
<head>
    <title>Это мой будущий сайт</title>
    <meta charset="utf-8">
<link rel="stylesheet" type="text/css" href="test2.css">
<link href='http://fonts.googleapis.com/css?family=PT+Serif+Caption&subset=latin,cyrillic' rel='stylesheet' type='text/css'>
    <script>
        $(function() {
    var $info_panel = $('.info_panel');
    var $el2 = $('.el2');
    var $el3 = $('.el3');
    $('.down').click(function(e) {
        e.stopPropagation();
        $Text_1.toggleClass('.slide');
        $Text_2.toggleClass('.slide');
    });
        });
    </script>
    <style>
    .Text_1 {
        width: 100%;
    position: absolute;
       right:0;
    top: 15vh;
                -webkit-transition: right 0.4s linear;
    -moz-transition: right 0.4s linear;
    -ms-transition: right 0.4s linear;
    -o-transition: right 0.4s linear;
    transition: right 0.4s linear;
}
 
.Text_2 {
        width: 100%;
    position: absolute;
       right:0;
    top: 55vh;
                -webkit-transition: right 0.4s linear;
    -moz-transition: right 0.4s linear;
    -ms-transition: right 0.4s linear;
    -o-transition: right 0.4s linear;
    transition: right 0.4s linear;
}
.slide {
    right: 8.5vw;
}
    </style>
</head>
    <body>
        <a class="down" href="#">
             ↓
             </a>
        <br>
        <p class="Text_1">Текст 1</p>
        <p class="Text_2">Текст 2</p>
    </body>
      </html>

Добавлено через 16 минут
Ладно, вопрос, котрый я создавал решён. Создам ка я лучше новую тему.

@Armi 312 / 106 / 69 Регистрация: 18.04.2015 Сообщений: 346
	20.04.2015, 18:48	4
	Сообщение было отмечено diargon3454 как решение Решение Правый блок двигается а левый надо чтобы класс .slide_content находился ниже класса .el2 в css файле или использовать !important иначе он его не перебивает по приоритету. 1

@diargon3454 18 / 18 / 4 Регистрация: 30.09.2013 Сообщений: 519
	20.04.2015, 19:19 [ТС]	7
	Мммм. Спасибо. Заработало. Добавлено через 7 минут Хотелось узнать ответ на остальные вопросы 0

@Armi 312 / 106 / 69 Регистрация: 18.04.2015 Сообщений: 346
	20.04.2015, 19:52	8
	Желательно под каждый вопрос отдельную тему по правилам форума. И 3 вопрос объясните подробнее с html кодом а то не понятно, что у вас там происходит. 0

@diargon3454 18 / 18 / 4 Регистрация: 30.09.2013 Сообщений: 519
	20.04.2015, 19:56 [ТС]	9
	Сообщение от Armi Желательно под каждый вопрос отдельную тему по правилам форума. Хорошо. Сейчас создам соответсвующие темы. 0

Непонятки c jquery

Решение