CODEWITHSUNDEEP
javascriptjquery
user4591043
user4591043

Reputation:

Jquery animation and css right and left

The following code is working fine on the first click (moving the left border to the middle) but on the second it does not and I cant figure why. I know that I can use another solution but I want to know why the right:50% is not working. Here is the code: 

$(document).ready(function(){
	 			 
	$( "button" ).click(function(){
		
		   screenWidth = $("html").width() /2;
	     positionLeft = Math.round($(".container").offset().left)	
					 
		if ( positionLeft < screenWidth) {		
	    $(".container").animate({
			left: "50%"
			}, 1000);
		} else if (positionLeft == screenWidth) {					
			$(".container").animate({
			right: "50%"
			}, 1000); 	
		}
	});
	
});
.container{
		background-color:black;
		height: 50%;
		width: 20%;
		position: absolute;
		top: 30%;				
	}		
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>debugging</title>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>

</head>

<body>
  <div class="container"></div>         
  <button>click</button> 
</body>


<script>


</script>
</html>

Upvotes: 0

Views: 808

Answers (5)

yckart
yckart

Reputation: 33378

Since you are already walking in one direction, you have to turn around...

If you want to position an element, you can declare only the offset from "the same sides" (top-left / bottom-right). Just reset the opposite with the auto-value.

$(document).ready(function(){
         
  $( "button" ).click(function(){
    screenWidth = $("html").width() /2;
    positionLeft = Math.round($(".container").offset().left)
           
    if ( positionLeft < screenWidth) {
      $(".container").css('right', 'auto');
      $(".container").animate({
        left: "50%"
      }, 1000);
    } else if (positionLeft == screenWidth) {
      $(".container").css('left', 'auto');
      $(".container").animate({
        right: "50%"
      }, 1000);
    }
  });
  
});
.container {
  background-color:black;
  height: 50%;
  width: 20%;
  position: absolute;
  top: 30%;
}
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>debugging</title>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>

</head>

<body>
  <div class="container"></div>
  <button>click</button> 
</body>


<script>


</script>
</html>

Upvotes: 0

imbearr
imbearr

Reputation: 1009

  1. For the first: use same finction for get integer values of screenWidth and positionLeft.

    screenWidth|0 == Math.floor(screenWidth) Math.round(screenWidth) Math.ceil(screenWidth)

There are three variants, and you must use this one.

  1. And second: you can add console.log('step1'), console.log('step2') for view result of your click function because you css solution is bad.

Upvotes: 0

Mario A
Mario A

Reputation: 3363

You have more then one problem in your code:

This condition may not be true because of the Math.round you are using:

positionLeft == screenWidth

Just use else without a condition.

You animate left at the first click, and right at the second click, but then the left and the right style are both set! Either reset left and then use right, or just use one of both.

Here is a jsfiddle: http://jsfiddle.net/438o3u6x/

Upvotes: 1

Mouser
Mouser

Reputation: 13304

$(document).ready(function(){
	 			 
	$( "button" ).click(function(){
		
		   screenWidth = parseInt($("html").width() /2, 10);
	     positionLeft = Math.round($(".container").offset().left)	
					 
		if ( positionLeft < screenWidth) {		
	    $(".container").css({left : '0%'}).animate({
			left: "50%"
			}, 1000);
		} else if (positionLeft == screenWidth) {					
			$(".container").css({ left : 'calc(100% - 20%)'} ).animate({
			left: "49%"
			}, 1000); 	
		}
	});
	
});
.container{
		background-color:black;
		height: 50%;
		width: 20%;
		position: absolute;
		top: 30%;				
	}		
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>debugging</title>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>

</head>

<body>
  <div class="container"></div>         
  <button>click</button> 
</body>


<script>


</script>
</html>

You need a different approach to this. right doesn't seem to work. So first use css to set the element to 100% left, using calc as a nifty way to subtract the width of the element. then return to left 49% (to reset animation from the left) which gives you the animation you want I guess?

Upvotes: 0

Harshit Tailor
Harshit Tailor

Reputation: 3281

You have to just change this condition:

$( "button" ).click(function(){

           screenWidth = $("html").width() /2;
         positionLeft = Math.round($(".container").offset().left)   

        if ( positionLeft < screenWidth) {      
        $(".container").animate({
            left: "50%"
            }, 1000);
        } else if (positionLeft == screenWidth) {                   
            $(".container").animate({
            left: "0%"
            }, 1000);   
        }
    });

Change right: "50%" with left: "0%"

Live Demo

Upvotes: 0

Related Questions