CODEWITHSUNDEEP
javascriptjquerycss
truetaurus
truetaurus

Reputation: 1

Animate between 2 divs

I have 2 divs, 1 is just off the screen to the left, and the other visible. the divs contain unordered lists. Now when i click on one of the 'li' list items i would like to slide div 1 to the left off screen and bring div 2 to the right on screen. so this is what i have done so far:

<script>
var swap =0;
$("(#cat)li:first").click(function(){
    if(swap==0){
        $("#cat").animate({"left": "-=150px"}, "slow");
        $("#cat2").animate({"left": "+=130px"}, "slow");
        swap=1;
    }
    else{
        $("#cat").animate({"left": "+=150px"}, "slow");
        $("#cat2").animate({"left": "-=130px"}, "slow");
        swap=0;
    }
});
</script>

cat and cat2 are the 2 divs with cat2 initially offscreen to the left. Now it sort of works but not quite. Right now i can click anywhere on screen and the 2 switch. But how do i do it so when i click on a list item it does the swap?

Note: I want to later be able to grab the text in list item to use, and it maybe be any of the list items not just the first.

thanks

Upvotes: 0

Views: 767

Answers (2)

mrtsherman
mrtsherman

Reputation: 39902

To start it looks like your jquery selector isn't formatted correctly. If you want it to fire on only the first list item click then change 

$("(#cat)li:first")

to 

$("#cat li:first, #cat2 li:first")

This says, for the first list item in div #cat or #cat2 do this. Your question is phrased as though you want it for all list items though, in which case you would want.

$("#cat li, #cat2 li") or $("li")

Example Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <script type="text/javascript" src='http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.js'></script>
    <script type="text/javascript">
    $(document).ready(function () {
        var swap =0;
        $("#cat li, #cat2 li").click(function(){
                if(swap==0){
                        $("#cat").animate({"left": "-=150px"}, "slow");
                        $("#cat2").animate({"left": "+=130px"}, "slow");
                        swap=1;
                }
                else{
                        $("#cat").animate({"left": "+=150px"}, "slow");
                        $("#cat2").animate({"left": "-=130px"}, "slow");
                        swap=0;
                }
        });
    });

    </script>
    <style>
        li { border: 1px solid red; }
        #cat { position: absolute; top: 30px; left: 150px; }
        #cat2 { position: absolute; top: 60px; left: 0px; }
    </style>
</head>

<body>

    <div id="cat">
        <ul>
            <li>a</li>
            <li>b</li>
            <li>c</li>
            <li>d</li>
        </ul>
    </div>

    <div id="cat2">
        <ul>
            <li>w</li>
            <li>x</li>
            <li>y</li>
            <li>z</li>
        </ul>
    </div>

</body>
</html>

Upvotes: 1

powtac
powtac

Reputation: 41080

Maybe you want to use http://jqueryui.com/demos/sortable/

Upvotes: 0

Related Questions