CODEWITHSUNDEEP
jquery
John
John

Reputation: 164

jQuery animate to show and move elements

Below is an small working script I've made. Have a look here 

$(document).ready(function () 
{
  $("ul li a").hover(function () 
  {
    $("span", this).fadeIn('fast');
    $("label", this).fadeIn('fast');
  },
    function () 
    {
        $("span", this).fadeOut(500);
        $("label", this).fadeOut(500);
    }
  );
});

What I've been trying to do is changing this effect into an animation using some simple animating functions but I'm just not getting the proper result.

An example of what I'm trying to do is :

  1. After hovering on <a> element, show the hidden <span> , animate its position to " left: 30px".
  2. Animate the position to "bottom:100px" .

I'd appreciate any suggestion, solution or tutorial related to that .

Upvotes: 0

Views: 178

Answers (1)

adeneo
adeneo

Reputation: 318322

$(document).ready(function () {
    $("ul li").on({
        mouseenter: function() {
            var self = this;
            $("span, label", this).fadeIn('fast', function() {
                $(this).stop().animate({
                    left: 30,
                    top : $(self).height() - 100
                }, 400);
            });
        },
        mouseleave: function() {
            var self = this;
            $("span, label", this).stop().animate({
                    left: -30,
                    top : 0
            }, 400, function() {
                $(this).fadeOut('fast');
            });
        }
    });
});

FIDDLE

Upvotes: 1

Related Questions