CODEWITHSUNDEEP
javascriptjqueryhtmlcss
jsg
jsg

Reputation: 1264

jquery transition effect on block

I'm trying to add an effect on a div, where once you hover over the block the block will move up. I'm using Jquery transitions as I'm aware that anything under ie10 doesnt really support css transitions. At the moment I can get it to move but there is no effect on the movement (just using css). I'm not sure how I would start to add the jquery transition.

At the moment I got it so that once you hover over the block it adds a class.

$(document).ready(function () {
    $(".container").hover(function () {
        $(this).toggleClass("animated-effect");
    });
});

Heres my jsfiddle, I can't manage to get the code to work something up with my js: http://jsfiddle.net/4bgj4959/

Upvotes: 0

Views: 278

Answers (2)

KJ Price
KJ Price

Reputation: 5964

You are looking for the animate method. Note that hover method takes two parameters, the second parameter is for onmouseout (when you are done hovering).

$(document).ready(function() {
  $(".container").hover(function() {
    $(this).animate({
      top: '20px'
    })
  }, function() {
    $(this).animate({
      top: '0px'
    })
  });
});
.container {
  width: 500px;
  height: 100px;
  border: 1px solid #00c;
  position: relative;
  top: 0px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="container">
</div>

Upvotes: 2

ozil
ozil

Reputation: 7117

you code is working you didn't include jquery see updated fiddle
demo

Upvotes: 0

Related Questions