CODEWITHSUNDEEP
jquerycss
zelocalhost
zelocalhost

Reputation: 1183

Div Transition Effect Not Working

I want to add Transition on my div "onclick" event): http://jsfiddle.net/nKtC6/698/ , (Using jquery) and it's doesn't work, so this is what i want with a other example (using CSS) : http://jsfiddle.net/nKtC6/690/

my js seems some problem :

$(function() {                       
  $("#icon").click(function() {
    $("animate1").removeClass("animate1-nomove").addClass("animate1-move");      
    $("animate2").removeClass("animate2-nomove").addClass("animate2-move");  
  });
});

and css

.animate1-nomove {left: -100px;}
.animate2-nomove {left: 0px;}

.animate1-move {left: 0px;}
.animate2-move {left: 150px; background-color: red;}

it's not possible to add this effect with js ? i doesn't like jquery animate (for example) , i prefer css3 solution :)

Upvotes: 1

Views: 147

Answers (2)

recamilio
recamilio

Reputation: 89

You have a syntax error in your selectors inside #icon.click callback, you missed the dots for the classes: 

    $("animate1").removeClass("animate1-nomove").addClass("animate1-move");      
    $("animate2").removeClass("animate2-nomove").addClass("animate2-move");  
    // should be
    $(".animate1").removeClass("animate1-nomove").addClass("animate1-move");      
    $(".animate2").removeClass("animate2-nomove").addClass("animate2-move");

That said, here's a working example with the click event instead of hover:
http://jsfiddle.net/ffNw6/

Upvotes: 1

NoGray
NoGray

Reputation: 1149

You forgot to include the class selector in your $("animate1") and $("animate2"), should be $(".animate1") and $(".animate2").

Upvotes: 1

Related Questions