CODEWITHSUNDEEP
jquery
meoww-
meoww-

Reputation: 1892

jQuery Animate Question

I have a very basic function which I am using jQuery to slide some content either out (from left to right) or back in (from right to left). The code below works, however, what I am trying to do now is include the "+" at the end of my "overDiv", and make it so that it will always show.

To paint a more lucid picture, right now if you paste that code into your editor and include google's jQuery, you will see that clicking the "+" eliminates the "overDiv" block completely. However, what I want to do is place the "+" at the end of the "overDiv" block so that when the text 'disappears' off of the page, the + will always remain. Hopefully that makes some sense?

Thanks in advance.

<body>

<script language="javascript" type="text/javascript">
$(function() {
    // when we click on the a-href id 'togglen', we move the overDiv to the left.
$('#togglen').click(function() {
    // simple animation                          
    $('#overDiv').animate({
      left: parseInt($('#overDiv').css('left'),10) == 0 ? -$('#overDiv').outerWidth() : 0
    });
  }); // 
});


</script>
<div><a href="#" id="togglen">+</a></div>
<div style="background-color:#CCC; width:180px;  position:absolute; left:0; overflow:hidden; float:left;" id="overDiv">Lorem ipsum.</div>

Upvotes: 0

Views: 70

Answers (4)

ShankarSangoli
ShankarSangoli

Reputation: 69905

Set the position of sliding div to relative and float left the div with +. This way there is no hard coding of any values in the div with +

Working demo

Upvotes: 1

Karsten
Karsten

Reputation: 1866

Just add something like style="position:absolute; left:190px" to your +.

If you want the + to "stick" to the "overDiv" you can add

$('#togglen').animate({
        left: parseInt($('#overDiv').css('left'),10) == 0 ? 0 : $('#overDiv').outerWidth()
    });

before the other animation.

http://jsfiddle.net/PQxkc/

Upvotes: 0

Fresheyeball
Fresheyeball

Reputation: 30015

http://jsfiddle.net/KmmbK/ I pasted your code into a jsfiddle. Looks like the '+' does always remain. Do you want the '+' inside the disappearing div? If so simply subtract the width of the '+' from the distance the div animates off screen.

Upvotes: 0

Paul
Paul

Reputation: 2206

See here: http://jsfiddle.net/yVReu/

You need to also position your "+" element.

Upvotes: 0

Related Questions