CODEWITHSUNDEEP
javascriptjqueryonclickslide
Yahiya Ahmed
Yahiya Ahmed

Reputation: 13

Jquery slide from left to right not working

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/

Upvotes: 1

Views: 2919

Answers (3)

sam_277
sam_277

Reputation: 1

$(function() {
    $("#toggle").click(function () {
        $("#myDiv").animate(left:'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>

Upvotes: 0

prime
prime

Reputation: 15594

I made some changes. I think what you need is a functionality like below. 

       function slide(){
			//$("#toggle").css({'display':'none'}); // line 1
			$("#myDiv").css('display','inline'); 
			$("#myDiv").animate({'width': 500},2000,function(){
			}); 
			// remove below and uncomment line 1 to remove the toggle div immediately 
			$("#toggle").animate({'width': 0},2000,function(){
				$("#toggle").css({'display':'none'});
			});  
		}
	#toggle{
			position: absolute;
			background : red;
			height : 50px;			
		}
		
		.old {
			position: absolute; 
			display : none;
			width : 0px;
			height : 50px;
			background : green; 	
		}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min.js"></script>
<span>
		<div id="myDiv" class = "old">
			This text should slide out from left to right and overlap the onclick text.
	</div>
	</span> 
		<div id="toggle" class="sliding"    onClick = "slide()" >
			Text to click. This will be an image though.
		</div>

I think what happened to you is the sliding part take place first and change the CSS property to display the DIV. So you cannot see the actual sliding but you will see it after the sliding because the displaying will affect after the sliding. But not sure is it the case or not.

Upvotes: 0

jme11
jme11

Reputation: 17397

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.

Upvotes: 1

Related Questions