Jquery slide from left to right not working

Question

I am trying to get a slide left from right effect in jquery when I click a div. This is the HTML I am using.

<div id="myDiv" style="height: 70px; display: none; background-color:#eee; position: absolute; bottom: 1px; width: 100%">
<img style="margin-left: 9px; top: 8px; position: absolute" id="transparent-image" src="images/hover.png" alt="">
<p class="bi" style="display: inline; color: black; margin-left: 7%; position: absolute">Webbing in an alternative social network. based on intrests and interactions between people all over the world.</p>

And this is the jquery I am trying to use.

$(function()
{
  $("#toggle").click(function () {
    $(".sliding").css("display","none");
    //$(".sliding").animate({left:'-240px'});
    // Set the effect type
    var effect = 'slide';

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

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

    $('#myDiv').toggle(effect, options, duration);
  });

What I have achieved is the div is displaying onclick, but it is not sliding out in from left to right. Please help me out. I appreciate your help. Thanks.

I added the jsfiddle link as well. http://jsfiddle.net/yLyr599z/

Answer 1

I think this is what you want:

$(function() {
    $("#toggle").click(function () {
        $("#myDiv").animate({right:'0'});
    });
});

#toggle{
    position: absolute;
    left: 10px;
    bottom: 10px;
    cursor: pointer;
}

#myDiv {
    height: 70px;     
    background-color:#eee; 
    position: absolute; 
    bottom:0;
    right: 100%; 
    width: 100%;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div id="toggle">
	Text to click. This will be an image though.
</div>
<div id="myDiv">
	This text should slide out from left to right and overlap the onclick text.
</div>

A couple of key things:

1. In jQuery, you'll need to use the animate method.
2. If you want the text that slides in to overlap the text (or image) that you're using as your click target, then place it after the other in the source order. In other words, in your HTML example, make it the second div.
3. The starting position for your myDiv is all the way off-screen on the left. In CSS, you can do this with right: 100% on positioned elements.
4. The ending position for the sliding element is right: 0 since your width is 100%. That's the value you pass to the animate method in jQuery.