Ciao, il problema è che una volta eseguita l'animazione i due div non sono più allineati orizzontalmente, ma sono una sopra l'altro, mentre io vorrei scambiarli di posto.
codice:
<!DOCTYPE html>
<head>
<style>
#box{
position: absolute;
top: 50%;
left: 50%;
width: 1075px;
height: 602px;
margin-left: -537px;
margin-top: -301px;
}
#box p{
margin-top: 130px;
margin-left: 50px;
margin-right: 50px;
text-align: center;
}
#neg{
border: 0.15em solid #000000;
border-radius: 5px;
width: 600px;
height: 600px;
text-align: center;
float: left;
margin-right: 50px;
}
#pos{
border: 0.15em solid #000000;
border-radius: 5px;
width: 400px;
height: 400px;
text-align: center;
float: left;
}
</style>
<script language = "javascript" type="text/javascript" src = "jquery-2.1.0.js"></script>
</head>
<body>
<div id = "box" name = "box">
<div id = "neg" name = "neg">
<p>Testo 1</p>
</div>
<div id = "pos" name = "pos">
<p>Testo2</p>
</div>
</div>
<script type = "text/javascript">
$("#neg").animate({"marginleft": ("+=" + (start1 + 50).toString() + "px").toString()}, "slow", function(){void 0;});
$("#pos").animate({"marginRight": ("+=" + (start1 + 50).toString() + "px").toString()}, "slow", function(){void 0;});
</script>
</body>
</html>
Ho provato ad usare marginLeft e marginRight perchè con left e right non accadeva nulla.