Goede avond mensen,
Ik zou graag het volgende willen doen. Ik begin met twee divs van het zelfde formaat, na een druk op de knop wordt een 0 of 1 op gehaald (als voorbeeld) daarna zou ik graag willen dat een van de twee divs groter wordt en de ander kleiner. Dit is wat ik tot nu toe heb. maar het werkt niet zo als ik graag zou willen. want bij 0 zijn ze beide klein. doe ik iets fout??
Ik zou graag het volgende willen doen. Ik begin met twee divs van het zelfde formaat, na een druk op de knop wordt een 0 of 1 op gehaald (als voorbeeld) daarna zou ik graag willen dat een van de twee divs groter wordt en de ander kleiner. Dit is wat ik tot nu toe heb. maar het werkt niet zo als ik graag zou willen. want bij 0 zijn ze beide klein. doe ik iets fout??
HTML:
<!DOCTYPE html>
<html>
<style>
#main{
width: 300px;
height: 100px;
}
.red {
width: 150px;
height: 100px;
background-color: red;
float: left;
text-align: center;
vertical-align: middle;
line-height: 90px;
}
.blue {
width: 150px;
height: 100px;
background-color: blue;
float: left;
text-align: center;
vertical-align: middle;
line-height: 90px;
}
</style>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$("button").click(function(){
$.ajax({
type: 'POST',
url: 'script.php',
success: function(data) {
// will output 0 or 1
$("p").text(data);
// 0 = red
if(data === '0'){
$("div.red").stop().animate({width: 50}, 100 );
$("div.blue").stop().animate({width: 250}, 100 );
// 1 = blue
} else if(data === '1')
$("div.red").stop().animate({width: 250}, 100 );
$("div.blue").stop().animate({width: 50}, 100 );
}
});
});
});
</script>
</head>
<p>-</p>
<button type="button">Click Me</button>
<div id='main'>
<div class='red'>red</div>
<div class='blue'>blue</div>
</div>
script.php
</html>
PHP:
<?php
$rand = rand(0,1);
echo $rand;
?>
