CODEWITHSUNDEEP
jqueryjquery-animateaddclass
MadeInDreams
MadeInDreams

Reputation: 2146

How do I use animate and addclass together

I'm trying to animate an element in my page. I'm looking for a kind of zoom in effect with a click condition. You click a div and that div becomes the page.

I get the animate to work. However the addClass function doesn't work.

I'm also using a scrolling for my elements that are scrolled by the user or automated. So the div that control scrolling are faded over my actual elements. When I click an element to animate it it works. It gets wider and higher but I can't work the position and z-index. So I tried to add an addClass function to work it out but it doesn't work!?

Here's my code

$("#bloc1").live('click', function(){
    $("#bloc1").animate({
        width: "800px",
        margin: "0px",
        height: "100%",
    },3000);

    $('#bloc1').addClass('figureclick');  
});

You can also try it ou here test page Click on "le block 1" to see the effect

Thank you for your support!

UPDATE !!

I am not using a div im using HTML5 CSS3 and they are just plain figure /figure tags and my css goes like #container figure{}

Would it prevent the addclass to work?

Upvotes: 0

Views: 4877

Answers (3)

Jeff
Jeff

Reputation: 4146

Not sure why you have the nested functions or the escaping slashes. you should be able to do this...

$("#bloc1").live( 'click', function() {
  $(this).animate({
    width: "800px",
    margin: "0px",
    height: "100%"
  },3000 ).addClass('figureclick') ; 
});

Upvotes: 2

ScottE
ScottE

Reputation: 21630

Be careful with your trailing comma after the animate options. This will cause issues in IE.

Also, you can make use of chaining as below.

$("#bloc1").live('click', function(){
    $(this).animate({
        width: "800px",
        margin: "0px",
        height: "100%"
    },3000).addClass('figureclick'); 
});

And finally, if you want to add the class after the animation is complete you can use a callback function like the following:

$("#bloc1").live('click', function(){
    $(this).animate({width: "800px", margin: "0px", height: "100%"}, 3000, function() {
      $(this).addClass('figureclick');
    });
});

Upvotes: 2

David Tang
David Tang

Reputation: 93694

The syntax highlighting tells all - you need to remove the escaping backslashes. .live() also only takes one function, so combine the two into the same function:

$("#bloc1").live('click', function(){
    $("#bloc1").animate({
        width: "800px",
        margin: "0px",
        height: "100%",
    },3000);

    $('#bloc1').addClass('figureclick');  
});

Upvotes: 2

Related Questions