How to override previous onClick css class change (jQuery)


Tags: jquery,css,class,jquery-animate,override

Problem :

I wrote this code which animates (makes appear/disappear) a few elements on my page, including my 'work' div. It's triggered when clicking the link with class .fade

But I want that the others links of my menu, when clicked, override previous animation by making 'work' div fade away, then I can bring on & animate 'contact' div the way I did for the work div.

HTML part

    <div id="main">
    <h1>Hello</h1>
    <h2>This is a second heading/h2>

    <ul>
        <li><a href="#" class="fade">one</a></li>
        <li><a href="#" class="fade">two</a></li>
        <li><a href="#" class="fade">three</a></li>
    </ul>

    </div>

<div id="work">
</div>

<div id="contact">
</div>

jQuery part

$(function(){
  $(".fade").click(function(){
     $('#main').animate({ opacity: 1, top: "12%" }, 800);   
     $('h1, h2').animate({ opacity: 0.5 }, 800);     
     document.getElementById('work').style.cssText = "display: block";
     $('#work').animate({ opacity: 0 }, 0);
     $('#work').animate({ opacity: 1, top: "350px" }, 800);
  });
});


Solution :

Add an attribute to each link saying which DIV it should animate, and add a class to all the target DIVs:

<ul>
    <li><a href="#" class="fade" data-target="work">one</a></li>
    <li><a href="#" class="fade" data-target="contact">two</a></li>
    <li><a href="#" class="fade" data-target="something">three</a></li>
</ul>

</div>

<div id="work" class="target">
</div>

<div id="contact" class="target">
</div>

In your jQuery, use that data as the DIV instead of hard-coding #work.

$(function(){
  $(".fade").click(function(){
     $('#main').animate({ opacity: 1, top: "12%" }, 800);   
     $('h1, h2').animate({ opacity: 0.5 }, 800);
     var target = "#" + $(this).data("target");
     $(".target:not("+target+")").hide();
     $(target).show();
     $(target).animate({ opacity: 0 }, 0);
     $(target).animate({ opacity: 1, top: "350px" }, 800);
  });
});

It looks like you're implementing tabbed browsing, maybe look at the jQuery UI Tab widget?


    CSS Howto..

    How to center banner with jquery mobile?

    How to prevent transition to run on page load after height is set with javascript in Safari?

    How to style OL number points in CSS [duplicate]

    How to style more than one ul

    How to add css for specific input type text

    How to FadeIn a parent element and then it's child elements with a slight Delay (CSS Only)

    How to override default CSS in modern GWT applications?

    How to use existing SVG symbols (in a file) as markers in highcharts?

    How to remove the space between inline-block elements?

    How to make an object go to a higher layer

    How to allow scroll on mobile

    How to remove space between bannner and content in wordpress theme?

    How to change or disable the alternating background colors in Google Prettify

    HTML + CSS dropdown menu: how to add a button between each first-level link without breaking the alignment?

    How can i get spaces between images with the same class?

    Can someone show me how to get my CSS code to work more than once? [closed]

    How to horizontally repeat two different bg gradients to the entire page width?

    How to draw the following shape using CSS3 [duplicate]

    How do I create bookmarklet to overlay html/div layer and CSS from external file

    How to reduce font weight in Firefox on Mac with CSS?

    How to disable
    tags inside
    by css?

    How to achieve this CSS layout - Answered [closed]

    How to space children evenly horizontally in css

    How does a document reference an SCSS file?

    How to apply css and elemental styles to a ASP.net MVC 3 Web Application

    How to fix roll link in IE11

    How to use imported css styles in GWT correctly

    How do I center this menu?

    How can I use CSS to select and style all LI elements that have UL sub-elements? [duplicate]

    how to create a facebook look alike gallery with css and jquery? [closed]