Плавно выдвигающийся div

z-z · Регистрация: 22.06.2011

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

здравствуйте, форумчане)) подскажите, пожалуйста, где найти код для плавного выплывания блока при наведении на другой блок мыши, сделанный на jquery.

искал, но все не то, именно выдвигания не нашел, тибо при нажатии... а с jquery особо не знаком, сам не напишу)

@borovik · 13.05.2012, 11:25

ты не поверишь в jquery

Javascript

1	$("#mydiv").hover(function(){$(this).slideToggle();});

z-z · 13.05.2012, 11:39 **[ТС]**

а скорость, место, откуда и куда, как задать?))

Добавлено через 13 минут
с этим разобрался)) а как сделать, чтобы наоборот при наведении появлялось, а потом исчезало? и нельзя сделать так, чтобы конструкция страницы не нарушалась?

@Milky_Way · 13.05.2012, 12:02

Тебе именно на jquery? у меня такая панелька на css работает очень хорошо.

HTML5

<div id="button"> »
    <div id="s_panel">
        : )
    </div>
</div>

и в css оформляем вот так:

CSS

#button {
    position: fixed;
    top: 353px;
    left: 0;
    background: #0094d6;
    width: 28px;
    height: 50px;
    font: 40px Georgia;
    color: #fff;
    text-align: center;
    -webkit-transition-duration: 0.3s;
    -moz-transition-duration: 0.3s;
    -o-transition-duration: 0.3s;
    transition-duration: 0.3s;
    -webkit-border-radius: 0 5px 5px 0;
    -moz-border-radius: 0 5px 5px 0;
    border-radius: 0 5px 5px 0;
    }
#s_panel {
    position: fixed;
    top: 153px;
    left: -100px;
    background: #ff7700;
    width: 100px;
    height: 150px;
    padding: 100px 0 0 0;
    -webkit-transition-duration: 0.3s;
    -moz-transition-duration: 0.3s;
    -o-transition-duration: 0.3s;
    transition-duration: 0.3s;
    -webkit-border-radius: 0 5px 0 0;
    -moz-border-radius: 0 5px 0 0;
    border-radius: 0 5px 0 0;
    }
#button:hover {
    left: 100px;
}
#button:hover #s_panel {
    left: 0;
}

Добавлено через 2 минуты
соответственно в css, вот тут

CSS

 #button:hover {
    left: 100px;
}
#button:hover #s_panel {
    left: 0;
}

уже и настраиваешь что именно у тебя должно выплывать и при наведении на какой элемент)

z-z · 13.05.2012, 12:07 **[ТС]**

Milky_Way, cпасибо

просто думал, что на цсс медленно не будет выползать)

Добавлено через 1 минуту
хотя это не совсем то, потому что мне такой же слайдер нужен посередине экрана, может как то под другой див засунуть?

@Milky_Way · 13.05.2012, 12:29

ну,скажем так,она выползает со "средней" скоростью) попробуй так,если не понравится,тогда уже через jquery и .toggle делать))

Добавлено через 17 минут
может это тебе больше подойдет

HTML5

<div class="handle" onmouseover="move();" onmouseout="move();">
</div>
 
<div class="panel">
</div>

оформляем эти панели через css

CSS

.panel {
    position: absolute;
    top: 80px;
    right: 0;
    display: none;
    background: #000000;
    border:1px solid #111111;
    -moz-border-radius-topleft: 20px;
    -webkit-border-top-left-radius: 20px;
    -moz-border-radius-bottomleft: 20px;
    -webkit-border-bottom-left-radius: 20px;
    width: 400px;
    height: auto;
    padding: 30px 130px 30px 30px;
    filter: alpha(opacity=85);
    opacity: .85;
}
 
.handle{
    background:#666;
    width:150px;
    height:300px;
    position:absolute;
    }

и код скрипта

Javascript

        
function move() {
    $(".panel").toggle("slow");
}

Добавлено через 3 минуты
скорость вылета плавная, вылетание панели ".panel" происходит при наведении на ".handle",убрал мышку с этого элемента и панель обратно спряталась,откуда вылетать это все дело будет,можешь настроить через css.

@borovik · 13.05.2012, 12:56

HTML5

<div id="button">
    <div id="s_panel">
        : )
    </div>
</div>

CSS

#button {
    position: fixed;
    top: 353px;
    left: 0;
    background: #0094d6;
    width: 28px;
    height: 50px;
    font: 40px Georgia;
    color: #fff;
    text-align: center;
    border-radius: 0 5px 5px 0;
    }
#s_panel {
    position: fixed;
    top: 153px;
    left: -100px;
    background: #ff7700;
    width: 100px;
    height: 150px;
    padding: 100px 0 0 0;
    border-radius: 0 5px 0 0;
}

Javascript

$('#button').hover(function(){
    $("#s_panel, #button").animate({left: "+=100px"}, 1000 );
},function(){
    $("#s_panel, #button").animate({left: "-=100px"}, 1000 );
});

http://jsfiddle.net/AemNZ/

@Qwa7 · 28.12.2012, 12:09

borovik, Спасибо вам большое за код! Я недавно начал изучать jquery (буквально вчера!), поэтому у меня пара вопросов:
1. Во первых, интересует создание нескольких таких кнопок в колонке, это придется для каждой создавать отдельную группу стилей, что бы можно было их расставить по порядку?
2. Кнопку хорошо колбасит если провести по ней несколько раз, она так же несколько раз откроется и закроется полностью... Как сделать что бы кнопка после того как указатель покинул область, начала заползать обратно? Я так полагаю нужно копать в сторону функции .mouseout или .stop (true).... ?

Вот что на данный момент есть:
http://jsfiddle.net/t2sAY/

Нужно что то типа такого, только попроще, без подпрыгиваний...:
http://playground.adambecker.info/sweet-menu/

Помогите пожалуйста новичку

@borovik · 04.01.2013, 00:08

http://jsfiddle.net/uLNpE/

@Qwa7 · 05.01.2013, 18:25

borovik, спасибо Вам огромное!! Очень выручили.

@muravei · 16.01.2013, 23:49

а куда надо вставить скрипт, в какую папку?

Javascript

$('#button').hover(function(){
    $("#s_panel, #button").animate({left: "0px"},{queue:false,duration:500});
    $("#button").animate({left: "150px"},{queue:false,duration:500});
},function(){
    $("#s_panel").animate({left: "-150px"},{queue:false,duration:500});
    $("#button").animate({left: "0px"},{queue:false,duration:500});
});

z-z · 17.01.2013, 00:28 **[ТС]**

muravei, скрипт достаточно вставить в код страницы, на которой ты это скрипт используешь... только надо взять его в теги

HTML5

1	<script> </script>

например

HTML5

<!DOCTYPE HTML>
<html>
<head>
    <meta charset="UTF-8">
</head>
<body>
    <script type="text/javascript">
$('#button').hover(function(){
 $("#s_panel, #button").animate({left: "0px"},{queue:false,duration:500});
 $("#button").animate({left: "150px"},{queue:false,duration:500});
 },function(){
 $("#s_panel").animate({left: "-150px"},{queue:false,duration:500});
 $("#button").animate({left: "0px"},{queue:false,duration:500});
 });
</script>
</body>
</html>

@muravei · 17.01.2013, 00:33

что то не получается, можете просто глянуть вот здесь http://www.100zakazov.com.ua/

z-z · 17.01.2013, 00:39 **[ТС]**

muravei, у вас jquery только для IE подключен... остальные браузеры его не видят...

@muravei · 17.01.2013, 00:42

а как чтоб его увидели другие браузері :-) , что в єтом файле jquery.js надо дописать? я правильно написал єто именно єтот файл?

@Qwa7 · 17.01.2013, 06:03

Привет всем, это снова я.
У меня очередной вопрос по кнопкам. Я создал специальную тему, но маленько ошибся разделом

.
Скрипт сделал в 1 общий div, т.к. если делать 2, то не будет возможности поставить на него эффекты тени.
Цитирую самого себя из той темы.

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

теперь мне нужно дописать скрипт, что бы при нажатии на кнопку меню, она не задвигалась под центральный слой, т.е. что бы оставалась открытой в соответствии с той вкладкой на которой я нахожусь.
Последовательность действий должна быть примерно примерно такая:
1.1 Зашел на сайт, все менюшки свернулись, кроме меню home (т.к. первая страница открывается home).
1.2 Перехожу в галерею, вкладка галереи открылась и не закрывается, вкладка домашней страницы закрылась.
1.3 и т.д.

Вот скрипт менюшек:

Javascript

$(window).load(function(){
$(window).load(function(){
 $(function() {
                $('#navigation a').stop().animate({'marginLeft':'130px'},150);
                $('#navigation > li').hover(
                    function () {
                        $('a',$(this)).stop().animate({'marginLeft':'-2px'},400);
                    },
                    function () {
                        $('a',$(this)).stop().animate({'marginLeft':'130px'},400);
                    }
                );
            });
});

Вот код HTML:

HTML5

<div class="left"> 
    <ul id="navigation">
      <li class="home"> <a title="home">Home</a></li>
      <li class="gallery"><a title="gallery">Gallery</a></li>
      <li class="soft"><a title="soft">Soft</a></li>
      <li class="contact"><a title="contact">Contact</a></li>
    </ul>
  </div>

Вот сайт, на котором я это все пытаюсь сделать

www.qwa7.net

Добавлено через 7 минут

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

а как чтоб его увидели другие браузері :-) , что в єтом файле jquery.js надо дописать? я правильно написал єто именно єтот файл?

У вас похоже мешает строчка 10.
 тире в конце или удалите эту строчку (и строчку 24 то же)

@muravei · 17.01.2013, 18:30

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

Привет всем, это снова я.
У меня очередной вопрос по кнопкам. Я создал специальную тему, но маленько ошибся разделом

.
Скрипт сделал в 1 общий div, т.к. если делать 2, то не будет возможности поставить на него эффекты тени.
Цитирую самого себя из той темы.

Вот сайт, на котором я это все пытаюсь сделать

www.qwa7.net

Добавлено через 7 минут

У вас похоже мешает строчка 10.
 тире в конце или удалите эту строчку (и строчку 24 то же)

Как у Вас это работает, у меня не выходит, вродибы пересмотрел Ваш код как это Вы делали, но всеравно меню в верху торчит и не открывается :-) капец, у кого мозгов отдолжить :-) чтоб понять что где может не так написал или переписал, а может не дописал ????? :-)

@Qwa7 · 17.01.2013, 19:44

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

Как у Вас это работает, у меня не выходит, вродибы пересмотрел Ваш код как это Вы делали, но всеравно меню в верху торчит и не открывается :-) капец, у кого мозгов отдолжить :-) чтоб понять что где может не так написал или переписал, а может не дописал ????? :-)

Глядя на ваш код:
не вижу где подключена библиотека jQuery.
Классы ID прописанные в кнопке и ID в скрипте сейчас не совпадают..
у меня кнопка выдвигается справа на лево, вам значит нужно минус поставить вот так "-130px"

Вот короче.
http://jsfiddle.net/uLNpE/
Выдвигается слева, стили я не менял, поэтому буквы торчат, но это не долго поправить.

Добавлено через 12 минут
Изменить лева и право то же не долго, в JS убираем минус, в стилях ul#navigation прописываем float: right;

@muravei · 17.01.2013, 20:56

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

HTML5

<div class="left"> 
    <ul id="navigation">
      <li class="home"> <a title="home">Home</a></li>
      <li class="gallery"><a title="gallery">Gallery</a></li>
      <li class="soft"><a title="soft">Soft</a></li>
      <li class="contact"><a title="contact">Contact</a></li>
    </ul>
  </div>

Добавлено через 7 минут
ссылки сделал а как чтоб оно задвигалось, что-то пропустил? Подскажите пожалуйста

@Qwa7 · 17.01.2013, 21:17

Похоже что у вас все библиотеки в комментариях. Я уже говорил...

z-z 170 / 169 / 56 Регистрация: 22.06.2011 Сообщений: 980
	17.01.2013, 00:39 [ТС]	14
	muravei, у вас jquery только для IE подключен... остальные браузеры его не видят... 0

z-z 170 / 169 / 56 Регистрация: 22.06.2011 Сообщений: 980
		1
	Плавно выдвигающийся div 13.05.2012, 10:56. Показов 19156. Ответов 20 Метки нет (Все метки) здравствуйте, форумчане)) подскажите, пожалуйста, где найти код для плавного выплывания блока при наведении на другой блок мыши, сделанный на jquery. искал, но все не то, именно выдвигания не нашел, тибо при нажатии... а с jquery особо не знаком, сам не напишу) 0

z-z 170 / 169 / 56 Регистрация: 22.06.2011 Сообщений: 980
	13.05.2012, 11:39 [ТС]	3
	а скорость, место, откуда и куда, как задать?)) Добавлено через 13 минут с этим разобрался)) а как сделать, чтобы наоборот при наведении появлялось, а потом исчезало? и нельзя сделать так, чтобы конструкция страницы не нарушалась? 0

z-z 170 / 169 / 56 Регистрация: 22.06.2011 Сообщений: 980
	13.05.2012, 12:07 [ТС]	5
	Milky_Way, cпасибо просто думал, что на цсс медленно не будет выползать) Добавлено через 1 минуту хотя это не совсем то, потому что мне такой же слайдер нужен посередине экрана, может как то под другой див засунуть? 0

@Qwa7 0 / 0 / 0 Регистрация: 28.12.2012 Сообщений: 9
	28.12.2012, 12:09	8
	borovik, Спасибо вам большое за код! Я недавно начал изучать jquery (буквально вчера!), поэтому у меня пара вопросов: 1. Во первых, интересует создание нескольких таких кнопок в колонке, это придется для каждой создавать отдельную группу стилей, что бы можно было их расставить по порядку? 2. Кнопку хорошо колбасит если провести по ней несколько раз, она так же несколько раз откроется и закроется полностью... Как сделать что бы кнопка после того как указатель покинул область, начала заползать обратно? Я так полагаю нужно копать в сторону функции .mouseout или .stop (true).... ? Вот что на данный момент есть: http://jsfiddle.net/t2sAY/ Нужно что то типа такого, только попроще, без подпрыгиваний...: http://playground.adambecker.info/sweet-menu/ Помогите пожалуйста новичку 0

@borovik 210 / 204 / 52 Регистрация: 25.07.2010 Сообщений: 1,162
	04.01.2013, 00:08	9
	http://jsfiddle.net/uLNpE/ 1

@Qwa7 0 / 0 / 0 Регистрация: 28.12.2012 Сообщений: 9
	05.01.2013, 18:25	10
	borovik, спасибо Вам огромное!! Очень выручили. 0

@muravei 0 / 0 / 0 Регистрация: 15.01.2013 Сообщений: 14
	17.01.2013, 00:33	13
	что то не получается, можете просто глянуть вот здесь http://www.100zakazov.com.ua/ 0

@muravei 0 / 0 / 0 Регистрация: 15.01.2013 Сообщений: 14
	17.01.2013, 00:42	15
	а как чтоб его увидели другие браузері :-) , что в єтом файле jquery.js надо дописать? я правильно написал єто именно єтот файл? 0

@muravei 0 / 0 / 0 Регистрация: 15.01.2013 Сообщений: 14
	17.01.2013, 18:30	17
	Сообщение от Qwa7 Привет всем, это снова я. У меня очередной вопрос по кнопкам. Я создал специальную тему, но маленько ошибся разделом . Скрипт сделал в 1 общий div, т.к. если делать 2, то не будет возможности поставить на него эффекты тени. Цитирую самого себя из той темы. Вот сайт, на котором я это все пытаюсь сделать www.qwa7.net Добавлено через 7 минут У вас похоже мешает строчка 10. <!--[if lt IE 7]> Все подключенные скрипты зеленые - находятся в комментариях. Или попробуйте добавить <!--[if lt IE 7]--> тире в конце или удалите эту строчку (и строчку 24 то же) Как у Вас это работает, у меня не выходит, вродибы пересмотрел Ваш код как это Вы делали, но всеравно меню в верху торчит и не открывается :-) капец, у кого мозгов отдолжить :-) чтоб понять что где может не так написал или переписал, а может не дописал ????? :-) 0

@Qwa7 0 / 0 / 0 Регистрация: 28.12.2012 Сообщений: 9
	17.01.2013, 19:44	18
	Сообщение от muravei Как у Вас это работает, у меня не выходит, вродибы пересмотрел Ваш код как это Вы делали, но всеравно меню в верху торчит и не открывается :-) капец, у кого мозгов отдолжить :-) чтоб понять что где может не так написал или переписал, а может не дописал ????? :-) Глядя на ваш код: не вижу где подключена библиотека jQuery. Классы ID прописанные в кнопке и ID в скрипте сейчас не совпадают.. у меня кнопка выдвигается справа на лево, вам значит нужно минус поставить вот так "-130px" Вот короче. http://jsfiddle.net/uLNpE/ Выдвигается слева, стили я не менял, поэтому буквы торчат, но это не долго поправить. Добавлено через 12 минут Изменить лева и право то же не долго, в JS убираем минус, в стилях ul#navigation прописываем float: right; 0

@Qwa7 0 / 0 / 0 Регистрация: 28.12.2012 Сообщений: 9
	17.01.2013, 21:17	20
	Похоже что у вас все библиотеки в комментариях. Я уже говорил... Миниатюры 0