<script type="text/javascript"> function onShow(id){var obj=$('#'+id); if(obj.width()=='0'){obj.animate({width:'350px',opacity:'1'},1000)} else{obj.animate({width:'0px',opacity:'0'},1000)}}; </script>
HTML
Code
<div id="block"><a href="javascript://" onclick="onShow('id0');return false;">Инфо</a> <div class="infoblock" id="id0"><img class="imgLeft" src="/_example/_img/_girls/aj_170x140.jpg" width="170" height="140" alt="AJ" />Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Praesent aliquam, justo convallis luctus rutrum, erat nulla fermentum diam, at nonummy quam ante ac quam. Maecenas urna purus, fermentum id, molestie in, commodo porttitor, felis. Nam blandit quam ut lacus. Quisque ornare risus quis ligula. Phasellus tristique purus a augue condimentum adipiscing. Aenean sagittis. Etiam leo pede, rhoncus venenatis, tristique in, vulputate at, odio. Donec et ipsum et sapien vehicula nonummy. Suspendisse potenti. Fusce varius urna id quam. Sed neque mi, varius eget, tincidunt nec, suscipit id, libero. In eget purus. Vestibulum ut nisl. Donec eu mi sed turpis feugiat feugiat. Integer turpis arcu, pellentesque eget, cursus et, fermentum ut, sapien. Fusce metus mi, eleifend sollicitudin, molestie id, varius et, nibh. Donec nec libero.</div> </div>
<script type="text/javascript"> function onShow1(id){var obj=$('#'+id); if(obj.width()=='0'){obj.animate({width:'350px',opacity:'1',left:'220px'},1000)} else{obj.animate({width:'0px',opacity:'0',left:'0px'},1000)}}; </script>
HTML
Code
<div id="block"><a href="javascript://" onclick="onShow1('id1');return false;">Инфо</a> <div class="infoblock" id="id1"><img class="imgLeft" src="/_example/_img/_girls/aj_170x140.jpg" width="170" height="140" alt="AJ" />Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Praesent aliquam, justo convallis luctus rutrum, erat nulla fermentum diam, at nonummy quam ante ac quam. Maecenas urna purus, fermentum id, molestie in, commodo porttitor, felis. Nam blandit quam ut lacus. Quisque ornare risus quis ligula. Phasellus tristique purus a augue condimentum adipiscing. Aenean sagittis. Etiam leo pede, rhoncus venenatis, tristique in, vulputate at, odio. Donec et ipsum et sapien vehicula nonummy. Suspendisse potenti. Fusce varius urna id quam. Sed neque mi, varius eget, tincidunt nec, suscipit id, libero. In eget purus. Vestibulum ut nisl. Donec eu mi sed turpis feugiat feugiat. Integer turpis arcu, pellentesque eget, cursus et, fermentum ut, sapien. Fusce metus mi, eleifend sollicitudin, molestie id, varius et, nibh. Donec nec libero.</div> </div>
<div class="exText"> <h3>Вариант №1</h3> <!--Start(infoblock0)--> <style type="text/css"> #block{position:relative;width:350px;margin:0 auto;} .infoblock{height:300px;width:0px;float:left;position:absolute;overflow:hidden;filter:alpha(opacity=0);opacity:0;background-color:#f4f4f4;} #id0{left:220px;} </style> <script type="text/javascript"> function onShow(id){var obj=$('#'+id); if(obj.width()=='0'){obj.animate({width:'350px',opacity:'1'},1000)} else{obj.animate({width:'0px',opacity:'0'},1000)}}; </script> <div id="block"><a href="javascript://" onclick="onShow('id0');return false;">Инфо</a> <div class="infoblock" id="id0"><img class="imgLeft" src="/_example/_img/_girls/aj_170x140.jpg" width="170" height="140" alt="AJ" />Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Praesent aliquam, justo convallis luctus rutrum, erat nulla fermentum diam, at nonummy quam ante ac quam. Maecenas urna purus, fermentum id, molestie in, commodo porttitor, felis. Nam blandit quam ut lacus. Quisque ornare risus quis ligula. Phasellus tristique purus a augue condimentum adipiscing. Aenean sagittis. Etiam leo pede, rhoncus venenatis, tristique in, vulputate at, odio. Donec et ipsum et sapien vehicula nonummy. Suspendisse potenti. Fusce varius urna id quam. Sed neque mi, varius eget, tincidunt nec, suscipit id, libero. In eget purus. Vestibulum ut nisl. Donec eu mi sed turpis feugiat feugiat. Integer turpis arcu, pellentesque eget, cursus et, fermentum ut, sapien. Fusce metus mi, eleifend sollicitudin, molestie id, varius et, nibh. Donec nec libero.</div> </div> <!--//End(infoblock0)--> </div> <hr /> <div class="exText"> <h3>Вариант №2</h3> <!--Start(infoblock1)--> <style type="text/css"> #id1{left:0px;} </style> <script type="text/javascript"> function onShow1(id){var obj=$('#'+id); if(obj.width()=='0'){obj.animate({width:'350px',opacity:'1',left:'220px'},1000)} else{obj.animate({width:'0px',opacity:'0',left:'0px'},1000)}}; </script> <div id="block"><a href="javascript://" onclick="onShow1('id1');return false;">Инфо</a> <div class="infoblock" id="id1"><img class="imgLeft" src="/_example/_img/_girls/aj_170x140.jpg" width="170" height="140" alt="AJ" />Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Praesent aliquam, justo convallis luctus rutrum, erat nulla fermentum diam, at nonummy quam ante ac quam. Maecenas urna purus, fermentum id, molestie in, commodo porttitor, felis. Nam blandit quam ut lacus. Quisque ornare risus quis ligula. Phasellus tristique purus a augue condimentum adipiscing. Aenean sagittis. Etiam leo pede, rhoncus venenatis, tristique in, vulputate at, odio. Donec et ipsum et sapien vehicula nonummy. Suspendisse potenti. Fusce varius urna id quam. Sed neque mi, varius eget, tincidunt nec, suscipit id, libero. In eget purus. Vestibulum ut nisl. Donec eu mi sed turpis feugiat feugiat. Integer turpis arcu, pellentesque eget, cursus et, fermentum ut, sapien. Fusce metus mi, eleifend sollicitudin, molestie id, varius et, nibh. Donec nec libero.</div> </div> <!--//End(infoblock1)--> </div>
<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>
HTML
Code
<div id="block"><a href="javascript://" onclick="onShow2('id2');return false;">Инфо</a> <div class="infoblock" id="id2"><img class="imgLeft" src="/_example/_img/_girls/aj_170x140.jpg" width="170" height="140" alt="AJ" />Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Praesent aliquam, justo convallis luctus rutrum, erat nulla fermentum diam, at nonummy quam ante ac quam. Maecenas urna purus, fermentum id, molestie in, commodo porttitor, felis. Nam blandit quam ut lacus. Quisque ornare risus quis ligula. Phasellus tristique purus a augue condimentum adipiscing. Aenean sagittis. Etiam leo pede, rhoncus venenatis, tristique in, vulputate at, odio. Donec et ipsum et sapien vehicula nonummy. Suspendisse potenti. Fusce varius urna id quam. Sed neque mi, varius eget, tincidunt nec, suscipit id, libero. In eget purus. Vestibulum ut nisl. Donec eu mi sed turpis feugiat feugiat. Integer turpis arcu, pellentesque eget, cursus et, fermentum ut, sapien. Fusce metus mi, eleifend sollicitudin, molestie id, varius et, nibh. Donec nec libero.</div> </div>
<div class="exText"> <h3>Вариант №3</h3> <!--Start(infoblock2)--> <style type="text/css"> #id2{left:0;top:0;width:350px;z-index:-1;} </style> <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> <div id="block"><a href="javascript://" onclick="onShow2('id2');return false;">Инфо</a> <div class="infoblock" id="id2"><img class="imgLeft" src="/_example/_img/_girls/aj_170x140.jpg" width="170" height="140" alt="AJ" />Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Praesent aliquam, justo convallis luctus rutrum, erat nulla fermentum diam, at nonummy quam ante ac quam. Maecenas urna purus, fermentum id, molestie in, commodo porttitor, felis. Nam blandit quam ut lacus. Quisque ornare risus quis ligula. Phasellus tristique purus a augue condimentum adipiscing. Aenean sagittis. Etiam leo pede, rhoncus venenatis, tristique in, vulputate at, odio. Donec et ipsum et sapien vehicula nonummy. Suspendisse potenti. Fusce varius urna id quam. Sed neque mi, varius eget, tincidunt nec, suscipit id, libero. In eget purus. Vestibulum ut nisl. Donec eu mi sed turpis feugiat feugiat. Integer turpis arcu, pellentesque eget, cursus et, fermentum ut, sapien. Fusce metus mi, eleifend sollicitudin, molestie id, varius et, nibh. Donec nec libero.</div> </div> <!--//End(infoblock2)--> </div>
вот я дурень - все время ставил функцию появления и скрытия на разные блоки, забыл что можно использовать условие с распознаванием ширины например... спс, буду знать!)
Добавлено (23.02.2012, 12:48) --------------------------------------------- Не люблю просить о помощи но мучаюсь второй день, навожу курсор на текст, как по выше указанному, блок выезжает и тут же прячется,
Доброго времени суток! Подскажите пожалуйста, - я использую принципиально похожий метод но, это вобщем конопка у меня Т.Е. При наведении на область выежает меню, только вот не получается у меня засунуть туда текст, который и должен быть ссылкой... вот то что я прописываю в css