How to use Slide effect with jquery-ui?

I have the following code so far but not sure how I can use jquery slide effect on an image I'm loading in a <div>.

.js I have loaded so far

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

The HTML code is

<div align="center"><img src="images/personal_photo.png" width="900" height="850" alt="Awesome effects"></div>

Note: S开发者_开发知识库ince I dont know how to apply the jquery-ui effects I have not done anything with the code.

$("img").click(function () {
      $(this).hide("slide", { direction: "left" }, 1000); 
});

From http://docs.jquery.com/UI/Effects/Slide

If you want to show the object and you want the slide towards the left, then you have to reverse the direction of the slide.

something like the following:

$("img").click(function () {
    $(this).show("slide", { direction: "right" }, 1000); 
});