How to make chaining effect in PHP

Script section code:


<script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
    $("#button").click(function(){
        $("#img1").css("color", "red").slideUp(2000).slideDown(2000);
$("#img2").css("color", "red").slideUp(2000).slideDown(2000);
$("#img3").css("color", "red").slideUp(2000).slideDown(2000);
$("#img4").css("color", "red").slideUp(2000).slideDown(2000);
    });
});

</script>

CSS section code:

<style type="text/css">
#img1{
float:left; height:400px; width:400px;
}
#img2{
float:left; margin-left:10px; height:400px; width:400px;
}
.clear{
clear:both;
}
#img3{
float:left; height:400px; width:400px;
}
#img4{
float:left; margin-left:10px; height:400px; width:400px; position:absolute;

}

Body section code:

<input type="button" name="chaining" id="button" value="Click" />
<div>
<img src="Your path" id="img1" />
</div>

<div>
<img src="Your path" id="img2" />
</div>
<div class="clear"></div><br />
<div>
<img src="Your path" id="img3" />
</div>

<div>
<img src="Your path" id="img4" />

</div>