CODEWITHSUNDEEP
javascriptjqueryhtml
havingagoatit
havingagoatit

Reputation: 583

Jquery how do i remove and add a class after button click with time delay before other functions

I currently have a script for a button click for the following html which in turn brings up some content marked by "target-data"

the a tag .....

<a class='slide' href='#' data-url='who-are-musability-music-therapy.html' data-target='#music'>
          <span class='element'>Music</span>
         </a>

the data target that gets loaded...

<div id ="overview" class="animated bounceInUp"></div>

and the jquery that performs the on click ...

$(document).ready(function(){
  $("body").on("click", ".slide", function(e){
    e.preventDefault();
    console.log($("#tam-content").load($(this).data("url") + ' ' + $(this).data("target")));

  });
});

QUESTION :- How do i put a timer in the script for 2 sec so that it removes the class bounceinup and adds bounceoutup then goes to the link as normal ?

Upvotes: 0

Views: 508

Answers (1)

StackSlave
StackSlave

Reputation: 10627

Hard to say, but maybe this is something you are looking for:

$(function(){
  $('.slide').click(function(){
    var t = $(this), tc = $('#tam-content');
    tc.load(t.data('url')+' '+t.data('target'), function(){
      setTimeout(function(){
        var a = tc.find('.animated');
        if(a.hasClass('bounceInUp')){
          a.removeClass('bounceInUp').addClass('bounceOutUp');
        }
        else if(a.hasClass('bounceOutUp')){
          a.removeClass('bounceOutUp').addClass('bounceInUp');
        }
        // run other code here
      }, 2000);
    });
  });
});

Upvotes: 1

Related Questions