CODEWITHSUNDEEP
javascriptjquery
aisiic
aisiic

Reputation: 139

Add fadeOut to current JS

    $(document).ready(function() {
        $(".tabs-menu a").click(function(event) {
            event.preventDefault();
            $(this).parent().addClass("current");
            $(this).parent().siblings().removeClass("current");
            var tab = $(this).attr("href");
            $(".tab-content").not(tab).css("display", "none");
            $(tab).fadeIn(1200);

        });
    });

This is for tabbed menu with contents (using jQuery, of course).

When I opening new tab, current contents fades out wery fast, but new tab contents opens slowly (as indicated 1200).

So, how can I edit this existing script to fade out contents slowly?

Example http://jsfiddle.net/2uts2kdt/7/

Upvotes: 0

Views: 63

Answers (2)

sbonkosky
sbonkosky

Reputation: 2557

http://jsfiddle.net/2uts2kdt/9/

Check out the updated JSFiddle above. Basically you want to call the fadeIn once the fadeOut is complete. You need use promise().done() because the fadeOut is called on multiple elements. So once it is all done it will call the done code.

$(document).ready(function() {
    $(".tabs-menu a").click(function(event) {
        event.preventDefault();
        $(this).parent().addClass("current");
        $(this).parent().siblings().removeClass("current");
        var tab = $(this).attr("href");
        $(".tab-content").not(tab).fadeOut(1200).promise().done(function() {
            $(tab).fadeIn(1200);
        });        
    });
});

Upvotes: 1

sbonkosky
sbonkosky

Reputation: 2557

If I understand correctly then you want to add a fadeOut call instead of just setting it to display:none

$(document).ready(function() {
$(".tabs-menu a").click(function(event) {
    event.preventDefault();
    $(this).parent().addClass("current");
    $(this).parent().siblings().removeClass("current");
    var tab = $(this).attr("href");
    $(".tab-content").not(tab).fadeOut(1200);
    $(tab).fadeIn(1200);

});

Upvotes: 0

Related Questions