CODEWITHSUNDEEP
javascriptjqueryhtmlcsscss-transitions
AspiringCanadian
AspiringCanadian

Reputation: 1663

Animate and then replace the class of div with fade effect

JSFiddle: Fiddle

The way it is supposed to work is as follows:

1 - the red blocks slide from top to bottom
2 - once that is done then the red boxes fadeOut
3 - then blue boxes fadeIn

Following is the html : 

<div class="posRel">
    <div class="trans1"></div>
    <div class="trans2"></div>
    <div class="trans3"></div>
    <div class="trans4"></div>
    <div class="trans5"></div>
    <div class="trans6"></div>
    <div class="trans7"></div>
</div>

Following is the js : 

    for (i = 1; i <= 7; i++) {
        $('.trans' + i).toggleClass('toggle');
    }

    setTimeout(function () {
        $('.toggle').fadeOut('slow', function () {
            $(this).addClass('fSmall1').fadeIn('slow');
        });
    }, 2000);

Link to the project: http://50.87.144.37/~projtest/team/design/EO/page-2.html

Link to the JSFiddle

Issues that i am facing :

I am rather inexperienced when it comes to js/jQuery so feel free to point out any silly mistake(s) too. Thanks.

Upvotes: 1

Views: 241

Answers (3)

JonVD
JonVD

Reputation: 4268

I'll try and attack most of your problems in one hit, but I suspect we may need a little back and forth to completely solve it.

Firstly, your fade in / out issue is tied to the way your animation is being fired. You're essentially calling the fade out on every element individually and then the fade in, but from the functionality you described in your requirements you should be firing one fade on the container instead:

for (i = 1; i <= 7; i++) {
    $('.trans' + i).toggleClass('toggle');
}

setTimeout(function () {
    $('.posRel').fadeOut('slow', function () {
        $('.toggle').addClass('fSmall1');
        $('.posRel').fadeIn('slow');
    });
}, 2000);

Fiddle

Smooth Transition

If you'd like to have a smooth fade without it blinking out and then back in you can use the fadeTo() method instead. A FadeTo() example can be found below, this will have all of the shapes fall down, pause for a fraction of a second, and then change colour. You can experiment with removing the setTimeout now that the fadeTo controls the animation time, but I've left it as close to the original as possible.

for (i = 1; i <= 7; i++) {
    $('.trans' + i).toggleClass('toggle');
}

setTimeout(function () {
    $('.posRel').fadeTo('slow', 2, function () {$('.toggle').addClass('fSmall1');});
}, 2000);

fadeTo() Example Fiddle

Upvotes: 1

Derek
Derek

Reputation: 4751

If you're using jQueryUI, this will work:

http://jsfiddle.net/zcYLM/11/ (this is an updated one)

This is a basic, stripped down example of your problem, but you can apply it to your code.

JS:

$(document).ready(function() {
    $('div[class*=trans]')
        .toggleClass('toggle', 2000)
        .promise()
        .done(function() {
            $(this)
                .fadeOut(2000)
                .promise()
                .done(function() { 
                    $(this)
                        .addClass('blue')
                        .fadeIn(2000);
                });
        });
});

CSS:

.posRel {
    position:relative;
}

div.posRel > div {
    background-color:red;
    position:absolute;
    top:0px;
    width:100px;
    height:100px;
}

div.posRel > div.trans1 { left:-50px; }
div.posRel > div.trans1.toggle { left:100px; top:150px; }
div.posRel > div.blue { background-color:blue; }

Upvotes: 1

sathish
sathish

Reputation: 800

i had used fadeto property, try the link. http://jsfiddle.net/zcYLM/10/

[http://jsfiddle.net/zcYLM/10/][1]


  [1]: http://jsfiddle.net/zcYLM/10/

Upvotes: 1

Related Questions