Question: When I click on the button every time function runs once more. Why? 

And I must click two times but I won't just one. 

Try this code in google chrome .

```
<html>
    <head>
        <script src="http://code.jquery.com/jquery-1.9.1.js"></script>
    </head>
    <body>
        <div id="one" > &nbsp Srboljub Petrovic</div>
        <input type="button" id="f" value="Klikni" onclick="f1();"></input>
        <script>
        function f1()
        {
            $("#f").click(function()
            {
                $("#one").slideUp();
                $("#one").css("border", "5px solid gray");
                $("#one").css("background-color", "red");
                $("#one").css("color","white");
                $("#one").slideDown();
            });
        }
        </script>
    </body>
</html>

```

Answer: 
You are binding a click handler inside a click handler, so every time you click the button, you bind a new click event handler, and it just keeps adding up.

```
<html>
    <head>
        <script src="http://code.jquery.com/jquery-1.9.1.js"></script>
        <script type="text/javascript">
          $(function() {
            $("#f").on('click', function() {
               $("#one").slideUp(function() {
                  $(this).css({border         : "5px solid gray",
                               backgroundColor: "red",
                               color          : "white"})
                         .slideDown();
               });
            });
          });
        </script>
    </head>
    <body>
        <div id="one">&nbsp Srboljub Petrovic</div>
        <input type="button" id="f" value="Klikni" />
    </body>
</html>

```

Note that an input element doesn't have a closing tag, and jQuery methods are chainable.  

Also, to slide the element up after it slides down, use a callback.
Before you bind the click function, make sure you unbind it.

```
function f1()
{
    $("#f").unbind("click").click(function()
    {
        //code
    });

}

```