mardi 21 avril 2015

make div, starting with left alignment, grow to width of window then shrink back and align right

Hi I am learning javascript and jQuery and I am trying to get a div when clicked to expand to the width of the window then shrink back down to original size but end up with the opposite alignment. I can get this to work if the object starts on the right, but it doesn't work if it starts on the left. I don't know why. Here's the working code, I want to swap the direction.

<!doctype html>
<html>
<head>
    <title>Learning jQuery</title>

<meta charset="utf-8" />
<meta http-equiv="Content-type" content="text/html; charset=utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />

<script type="text/javascript" src="jquery.min.js"></script>

<style>
    #circle {
        height:200px;
        width:200px;
        background-color:red;
        border-radius:100px;
        position:absolute;
        right:0;
    }

</style>

</head>

<body>  

    <h1>Header</h1>

    <div id="circle"></div>

    <script>

    $("#circle").click(function() {

        $(this).animate({

            width:"100%",

            }, 1000, function() {

                $(this).animate({

                    width:"200px",
                    left:"0"

                    }, 1000);

                });

        });


</script>

</body>
</html>

I tried just changing where you see "left" for "right" and vice-versa, but then it just starts on the left and ends on the left. I tried investigating the position() function included with the jQuery-ui plugin, but I couldn't get it to work with the animate function, so instead of being smooth, it would animate growing, shrinking back to the left and then popping over to the right.

Thanks for any help!

Aucun commentaire:

Enregistrer un commentaire