CODEWITHSUNDEEP
javascriptjquery
andre34
andre34

Reputation: 35

Activate div function and backwards

First i want to open this solution from @kgd and then i want to close it backwards when i click on another div ... in this example the yellow div in the fiddle?

var $a = $(".a"),
    $b = $(".b"),

function anim1() {
    $b.animate({width: 395}, {duration: 500, complete: anim2});
}

function anim2() {
    $a.animate({top:"0px"}, {duration: 500});
}

$(".b").click(function() {
    anim1();
});

var $a1 = $(".a"),
    $b1 = $(".b"),
    
function anim10() {
    $a1.animate({top:"-50px"}, {duration: 500});
}

function anim20() {
    $b1.animate({width: 137}, {duration: 500, complete: anim10});
}

$(".ab").click(function() {
    anim10();
});
.example {
    width: 100%;
}

.a {
    width: 600px;
    height: 50px;
    background-color: #888;
    
    position: relative;
    top: -50px;
}

.ab {
    width: 50px;
    height: 50px;
    background-color: yellow; 
    float: left;
}

.b {
    width: 137px;
    height: 50px;
    background-color: red;
    margin-left: 50px;
    float: left;
}

.c {
    width: 395px;
    height: 50px;
    background-color: black;
    margin-left: 100px;
    
    position: relative;
    top: 0px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js"></script>
<div class="example">
    <div class="c"></div>
    <div class="a">
        <div class="ab"></div>
        <div class="b"></div>
    </div>
</div>

And why my solution don't work?

Upvotes: 0

Views: 38

Answers (1)

arb
arb

Reputation: 7863

Code updated here. You were missing some commas where you were declaring the variables which was preventing the code from running.

var $a = $(".a"),
    $b = $(".b");

var $a1 = $(".a"),
    $b1 = $(".b");

UPDATE

I made a few small changes, but it really is difficult to determine what you are trying to accomplish based on the code and limited explanation. What I have provided is working code so maybe that will help get you going in the right direction?

Upvotes: 1

Related Questions