CODEWITHSUNDEEP
slidetogglejquery
Phantasmix
Phantasmix

Reputation: 45

jQuery Slide Inner div from right to left

Here's what I've got so far:

JSFiddle

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 like the blue inner div to slide from RIGHT to LEFT.

Upvotes: 2

Views: 25432

Answers (2)

Haris Amjed
Haris Amjed

Reputation: 171

It can be easily done using animate function. Here is the 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'});
});

http://jsfiddle.net/nAaMV/6/

Upvotes: 3

palaѕн
palaѕн

Reputation: 73896

You can do this:

// Set the options for the effect type chosen
var options = { direction: 'right' };

// Set the duration (default: 400 milliseconds)
var duration = 700;

$('#button-top').click(function() {
      $('.innerTop').toggle('slide', options, duration);
});
$('#button-bottom').click(function() {
      $('.innerBottom').toggle('slide', options, duration);      
});
  • Please make sure to include the jQuery UI file in your code, like I have included in the fiddle
    ( See the checkbox for the jQuery UI 1.9.2 checked in right side ).

FIDDLE DEMO #1 or FIDDLE DEMO #2

Upvotes: 3

Related Questions