Welcome to the Treehouse Community

Want to collaborate on code errors? Have bugs you need feedback on? Looking for an extra set of eyes on your latest project? Get support with fellow developers, designers, and programmers of all backgrounds and skill levels here with the Treehouse Community! While you're at it, check out some resources Treehouse students have shared here.

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and join thousands of Treehouse students and alumni in the community today.

Start your free trial

JavaScript

Posted by Joshua Bowden
.a{fill-rule:evenodd;}techdegree seal-36
Joshua Bowden
Full Stack JavaScript Techdegree Graduate 29,312 Points

Adding a duration to Jquery animation!

I am trying to add a duration to this jquery animate function. How would I go about doing it? 

$(document).ready(function(){
    "use strict";
    $(".hero-right").hover(function(){
        $(".three").css("transform","translate(50%,0)");
        }, function(){
        $(".three").css("transform","translate(-50,0)");
    });
});
Mark Pesantes
Mark Pesantes
13,179 Points

You could do something like below (please note I haven't tested this, but it should be the gist of what you want). You may also want to consider just using an addClass() method, then using the new class use CSS to apply the animation properties you're looking for. Hope that helps!

$(document).ready(function(){
    "use strict";
    $(".hero-right").hover(function(){
        $(".three").css({
            "transform": "translate(50%,0)",
            "transition-duration": "transform [time in here]"
        });
    });
});

1 Answer

Steven Parker
Steven Parker
243,318 Points
Steven Parker
Steven Parker
243,318 Points

I believe you mean you want to add transitions with a duration to these transforms. You can chain .css functions together or use object notation, here's an example using both:

$(document).ready(function() {
  "use strict";
  $(".hero-right").hover(
    function() {
      $(".three")
        .css("transform", "translate(50%,0)")  // function chaining
        .css("transition", "transform 1s");
    },
    function() {
      $(".three").css({
          transform: "translate(-50%,0)",      // object notation
          transition: "transform 1s"
        });
    }
  );
});

But it might be confusing to call this a "jQuery animate function" since that might be confused with the actual function named "animate" as describe on this MDN documentation page.