slidetoggle - jQuery Slide Inner div from right to left -
here's i've got far:
css:
#button-top { width: 100px; position: absolute; left: 75%; top: 40px; padding-left: 100px;overflow: hidden;} #button-top:hover, #button-bottom:hover {cursor: pointer;} .slide { position: relative; height: 100px; overflow: hidden; width: 350px; } .slide img {position: relative; z-index: 100;} .slide p {width: 80px; padding:8px 16px; color: #fff; margin: 0; } .innertop, .innerbottom { position: absolute; left: 0; top: 10px; width: 200px; height: 90px; padding: 6px; background: url(http://i39.tinypic.com/nz4ldw.png) 0 0 no-repeat; z-index: 50; display: none; } #button-bottom { width: 100px; position: absolute; left: 75%; top: 240px; padding-left: 100px;overflow: hidden;} script:
$('#button-top').click(function() { $('.innertop').toggle('slide'); }); $('#button-bottom').click(function() { $('.innerbottom').toggle('slide'); }); html:
<div class="hide-mobile" id="button-top"> [img] <div class="slide innertop"><p>hidden sliding content</p></div> </div> <div class="hide-mobile" id="button-bottom"> [img] <div class="slide innerbottom"><p>hidden sliding content</p></div> </div> i'd blue inner div slide right left.
it can done using animate function. here solution:
$('#button-top').toggle(function() { $('.innertop').animate({'left':'3px'}); }, function() { $('.innertop').animate({'left':'103px'}); }); $('#button-bottom').toggle(function() { $('.innerbottom').animate({'left':'3px'}); }, function() { $('.innerbottom').animate({'left':'103px'}); }); 
Comments
Post a Comment