|
Эффект выдвигающегося блока
|
|
| [1] RazieL [28.08.2011, 17:28] |
Не знаю как реализовать, в общем необходим эффект выдвигающегося блока
Хотелось бы реализовать с помощью события (onclick или onmouseon), а не прописывания отдельно скрипта...
Скрипт что-то с toggle связнаный, при клике меняет класс, на другой и обратно...
Code <style> #infoblock. { width: 210px; float:left; position:absolute; left: 215px; display:none; } </style> <div><a href="javascript://" onclick="событие(скрипт) то что сокрыто за покровами тайны для меня)">Инфо</a> <div class="infoblock">Содержимое</div>
Первоначально блок скрыт, при нажатии(на ссылку Инфо) блок с информацией выдвигается вправо, при повторном нажатии(или по таймауту) скрывается обратно.
Эффект выдвигания я могу реализовать с помощью css3 transition
Стили показаны для примера...
Перерыл много информации, но так и не смог пристроить...
Заранее благодарю) |
|
| [2] DesBR [28.08.2011, 19:54] |
В теме от меня есть что-то подобное. Вот пример:
Code <li><a id="go" onmouseover="on()">МЕНЮ</a> <ul id="click" style=""> Содержание блока <script> function on(){ $('#click').animate({ width:"515px", opacity: 1 }, 1000); }; function out(){ $('#click').animate({ width:"0px", opacity: 0 }, 1000); }; </script> <div class="mrclose" onclick="out()"> <span style="word-wrap:break-word; font-size:8pt; padding:2px;">c l o s e</span> </div> </ul> </li>
Сообщение отредактировал DesBR - Воскресенье, 28.08.2011, 19:57 |
|
| [3] RazieL [29.08.2011, 00:51] |
DesBR, хороший скрипт, немного изменив его смог приручить, тока есть проблемка... 
Т.к. блок относится к каждому пользователю, то необходим разный класс для каждого блока...
т.е нужно чтобы класс отправлялся в скрипт при клике на кнопку...
Вот скрипт, который у меня сейчас:
Code <script type="text/javascript"> function toggle( targetId ) { if (document.getElementById) { target = document.getElementById( targetId ); if (target.style.display == "") { target.style.display = "block"; } else { target.style.display = ""; } } } </script> <a href="javascript://" onclick="toggle( id$ID$ ); return false;">Инфо</a> <div class="user_info" id="id$ID$">Содержимое</div>
В данном случае, $ID$ это системный код юкоза ID материала, который всегда разный...
Так вот тут в скрипт отправляется id...
Скрипт, что ты предложил, слегка измененный мною:
Code <script type="text/javascript"> function on(){ if ($("div.user_info").width() == '0'){ $('div.user_info').animate({ width:"210px", display:"block", opacity: 1 }, 1000) } else { $('div.user_info').animate({ width:"0px", display:"none", opacity: 0 }, 1000); } }; </script> <a href="javascript://" onclick="on()">Инфо</a> <div class="user_info" id="id$ID$">Содержимое</div>
Если использовать твой скрипт, то при клике открываются все дивы сразу(что соответствую каждому пользователю), т.к. все блоки имеют одинаковы класс...
Можно ли как-то обойти эту проблему)
Заранее благодарю 
Сообщение отредактировал RazieL - Понедельник, 29.08.2011, 00:53 |
|
| [4] likbezz [29.08.2011, 03:08] |
RazieL, Quote (RazieL) Можно ли как-то обойти эту проблему)
Code <script type="text/javascript"> function on(id){var obj=$('#'+id); if(obj.width()=='0'){obj.animate({width:"210px",display:"block",opacity:'1'},1000)} else{obj.animate({width:"0px",display:"none",opacity:'0'},1000);} }; </script> <a href="javascript://" onclick="on('id$ID$');return false;">Инфо</a> <div class="user_info" id="id$ID$">Содержимое</div>
... |
|
| [5] DesBR [29.08.2011, 07:50] |
|
а я чтот и забыл что сразу все блоки откроются)) Пользователи были бы удивлены! |
|
| [6] RazieL [29.08.2011, 15:03] |
likbezz, Спасибо за помощь, все работает, теперь осталось тока со стилями поиграться, изменить немного под себя)))
А вот в этом коде
Code ({width:"210px",display:"block",opacity:'1'},1000)}
я могу любые CSS стили в этом коде вставлять?
Сообщение отредактировал RazieL - Понедельник, 29.08.2011, 15:08 |
|
| [7] likbezz [29.08.2011, 19:01] |
RazieL, Quote (RazieL) я могу любые CSS стили в этом коде вставлять?
Нет, не любые, только значение которых измеряется в цифровых единицах - ширина, высота, прозрачность ... прочее.
background, font-family и подобные не применяются. display:"block" тоже. |
|
| [8] RazieL [30.08.2011, 09:02] |
likbezz, Хорошо, пытаюсь сделать так: чтобы при клике на инфо, окно с содержимым слайдом выходило из блока аватары
Использую margin-left, вроде бы тоже в цифрах измеряется, но скрипт, перестает работать, я даже пытался вместо width ставить opacity, все равно не работает., реагирует, только когда в условии width...
Этот не работает
Code
<script type="text/javascript">
function on(id){var obj=$('#'+id);
if(obj.opacity()=='0'){obj.animate({width:'210px',opacity:'1'},500)}
else{obj.animate({width:'0xp',opacity:'0'},500);}
};
</script>
Этот тоже не работает
Code
<script type="text/javascript">
function on(id){var obj=$('#'+id);
if(obj.margin-left()=='0'){obj.animate({margin-left:'225px',opacity:'1'},500)}
else{obj.animate({margin-left:'0px',opacity:'0'},500);}
};
</script>
Чтобы я не поставил вместо условия (obj.width()=='0'), любое свойство, которое измеряется в цифрах, не работает...
Сообщение отредактировал RazieL - Вторник, 30.08.2011, 10:07 |
|
| [9] likbezz [30.08.2011, 10:50] |
RazieL, Quote (RazieL) Использую margin-left, вроде бы тоже в цифрах измеряется, но скрипт, перестает работать
Quote (RazieL) obj.margin-left()
Во-первых, «margin-left» пишется по другому, вот так: «marginLeft» ...
Во вторых, нет такой величины у объекта obj.margin-left() и такой тоже нет obj.marginLeft() - доступны в таком виде только высота и ширина - заложены в ядре JQ, остальные величина вычисляются через параметр $.css().
Quote (RazieL) Этот не работает ...
- Логично ...
Quote (RazieL) Этот тоже не работает
- Тоже вполне ожидаемо.
...
В обязательном порядке, как минимум два раза, читаем: Введение_в_jQuery ...
...
Потом изучаем пример: Анимационный эффект выдвигающегося блока инфы (infoblock $.animate()) ... запоминаем где и в чём ошиблись ...
... |
|
| [10] RazieL [30.08.2011, 20:07] |
Quote (likbezz) В обязательном порядке, как минимум два раза, читаем: Введение_в_jQuery ...
...
Потом изучаем пример: Анимационный эффект выдвигающегося блока инфы (infoblock $.animate()) ... запоминаем где и в чём ошиблись ...
Есть сэр Добавлено (30.08.2011, 20:07)
---------------------------------------------
Окей по порядку... прочитал Введение в jQuery, понял больше половины...
Quote (likbezz) Потом изучаем пример: Анимационный эффект выдвигающегося блока инфы (infoblock $.animate()) ... запоминаем где и в чём ошиблись
У меня нет проблем с текущим положением скрипта, я его потом, чуток исправил, когда margin не помог, использовал позиционирование(left, top...) он выглядит как у вас второй пример:
Я только хотел сделать, чтобы ширина была постоянной, и он как бы вылазил(используя z-index ) из-под блока, где аватар находится.
У меня почти получилось установить, чтобы он проверял по opacity, но я не могу избавиться от width, я не хочу чтобы ширина подвергалась изменению при слайде блока, но как я понял, из того что вы говорили, из-за obj, я не могу её убрать из списка свойств CSS .animate . Когда я убираю width, то скрипт не работает, кнопка активации Инфо, становится неактивной, как бы линк не работает...
Code
<script type="text/javascript">
function on(id) {var obj=$('#'+id);
if ($('#'+id).css("opacity")=='0'){$('#'+id).animate({opacity:'1',left:'220px'},500)}
else{$('#'+id).animate({opacity:'0',left:'0px'},500)}};
</script>
Если использовать этот же скрипт с свойствами width, то условие по opacity работает, но я не могу указать везде одинаковый width, т.к. тогда он тоже не будет работать...
Можно ли обойтись без obj, ну или чтобы width, не запрашивал...
ЗЫ: про obj (object) я мало что нашел в инете, это произвольная переменная или зарезервированная... Это она? |
|
| [11] likbezz [30.08.2011, 20:17] |
RazieL, Quote (RazieL) Я только хотел сделать, чтобы ширина была постоянной, и он как бы вылазил(используя z-index ) из-под блока, где аватар находится.
То есть - выдвигался вбок, как коробок спичек?, я правильно понял? ... У вас место позволяет его задвинуть?
То бишь, блок, из под которого он должен, без всяких эффектов прозрачности просто выдвигаться, должен быть выше индексом этого слоя, и иметь фон - чтобы не было видно движения - после закрывания его можно и скрыть.
Да, и у этого блока и у выдвигаемого должна быть обозначена высота, либо, верхний блок должен быть заведомо больше нижнего.
Quote (RazieL) У меня почти получилось установить, чтобы он проверял по opacity
Да проверять можно, блин по чему угодно - просто if ( $('#myitem').is(':visible')){}; - все ...
Quote (RazieL) obj (object) я мало что нашел в инете
- это просто переменная, мною назначенная, что бы не запрашивать каждый раз целиком объект, при обращении к нему. Сама важная для оптимизации величина. Может быть любой - «a,b,c» и так далее ....
...
Quote (RazieL) это произвольная переменная или зарезервированная..
- это произвольная переменная. Что напишешь (кроме зарезервированных имён) тем и будет - хочешь строкой, а хочешь объектом или функцией ...
...
›› Вариант №3. Играемся с zIndex, opacity и left ‹‹
... |
|
| [12] RazieL [30.08.2011, 20:54] |
Quote (likbezz) То есть - выдвигался вбок, как коробок спичек?, я правильно понял? ... У вас место позволяет его задвинуть?
Да именно оно с использованием z-index... В большей степени место позволяет, почти во всех случаях верхний блок выше будет...
Quote (likbezz) Да проверять можно, блин по чему угодно - просто if ( $('#myitem').is(':visible')){}; - все ...
Я знаю, что по любому условию можно проверять, просто не все мне известны, поэтому я решил использовать одно из условий стилей...
А как быть насчет width, ведь верхний код(пост выше) у меня не работал, без этого параметра?
А можно спросить... вы говорили:
Quote (likbezz) нет такой величины у объекта obj.margin-left() и такой тоже нет obj.marginLeft() - доступны в таком виде только высота и ширина - заложены в ядре JQ
То бишь, если это произвольная переменная, то для такого обозначения, где n - переменная, разрешены только (n.width()) и (n.height()) я так понял?
Сообщение отредактировал RazieL - Вторник, 30.08.2011, 20:55 |
|
| [13] likbezz [30.08.2011, 21:11] |
RazieL, Quote (RazieL) поэтому я решил использовать одно из условий стилей...
Логично ... )
Я тоже не стал углублятся - взял css('opacity'), так как оно может быть только числом, без всяких «px» или «%» ....
Code <script type="text/javascript">
function onShow2(id){var obj=$('#'+id);
if(obj.css('opacity')=='0'){obj.css({zIndex:'1'}).animate({opacity:'1',left:'220px'},1000)}
else{obj.animate({opacity:'0',left:'0px'},1000,function(){obj.css({zIndex:'-1'})})}};
</script>
Quote (RazieL) А как быть насчет width, ведь верхний код(пост выше) у меня не работал, без этого параметра?
Честно не разбирал почему он не работал, у блока была указана ширина??
У меня работает:
Code <script type="text/javascript">
function onShow2(id) {var obj=$('#'+id);
if (obj.css("opacity")=='0'){obj.animate({opacity:'1',left:'220px'},500)}
else{obj.animate({opacity:'0',left:'0px'},500)}};
</script>
- Только у вас не указано изменение индекса, и, видимо, не была установлена ширина - поэтому и не работал ....
...
Quote (RazieL) То бишь, если это произвольная переменная, то для такого обозначения, где n - переменная, разрешены только (n.width()) и (n.height()) я так понял?
Почти, но не только, есть ещё объекты $(windows) ... и тд, а вообще - применимо к любым объектам,
А если вы объявите объект:
Code var a=$('#myitem');
a.width() == $('#myitem').width()
- просто мы один раз объявили объект, который будем использовать неоднократно - это быстрее и меньше ресурсов расходуется, так как объект кешируется в переменную, если вкратце .... меньше обращений ко всему документу ...
.... |
|
| [14] RazieL [30.08.2011, 21:32] |
Огромное благодарю... шедевр
Я так смотрю, вы указывали z-index отдельно с помощью .css, получается в свойсвте стилей CSS .animate оно не будет работать, несмотря на то, что является числовым значением?
Quote (likbezz) просто мы один раз объявили объект,
Да, я это понял... |
|
| [15] likbezz [30.08.2011, 21:45] |
RazieL, Quote (RazieL) Я так смотрю, вы указывали z-index отдельно с помощью .css, получается в свойсвте стилей CSS .animate оно не будет работать, несмотря на то, что является числовым значением?
Нет, не по этому.
Оно будет работать, но так как порог его либо меньше верхнего блока - и тогда анимации не видно, либо больше и тогда ссылка не кликабельна .... )
Пришлось сделать так: при показе - объявляем z-index, включаем анимацию, при закрытии - наоборот, включаем анимацию, по завершению запускаем функцию и устанавливаем z-indeч == -1 - чтобы ссылка была кликабельна.
...
Quote (RazieL) Да, я это понял...
Оч хорошо. )
...
А про $.width() вот хорошо написано ... Разные плюшки
А вот список встроенных функций: Список функций
... |
|
