jquery hover and line rotate animation

Question

https://jsfiddle.net/eunjin/zasmLkzm/4/

$('#menu_bar').hover(function(){
    $('.line1').stop().animate({borderSpacing:45},{
        step: function(now,fx){
            $(this).css('-webkit-transform','rotate('+now+'deg)'); 
            $(this).css('-moz-transform','rotate('+now+'deg)');
            $(this).css('transform','rotate('+now+'deg)');
        },
        duration:'slow'
    },'linear');
    $('.line3').stop().animate({borderSpacing:-45},{
        step: function(now,fx){
            $(this).css('-webkit-transform','rotate('+now+'deg)'); 
            $(this).css('-moz-transform','rotate('+now+'deg)');
            $(this).css('transform','rotate('+now+'deg)');
        },
        duration:'slow'
    },'linear');
}, function(){
    $('.line1').stop().animate({borderSpacing:0},{
        step: function(now,fx){
            $(this).css('-webkit-transform','rotate('+now+'deg)'); 
            $(this).css('-moz-transform','rotate('+now+'deg)');
            $(this).css('transform','rotate('+now+'deg)');
        },
        duration:'slow'
    },'linear');
    $('.line3').stop().animate({borderSpacing:0},{
        step: function(now,fx){
            $(this).css('-webkit-transform','rotate('+now+'deg)'); 
            $(this).css('-moz-transform','rotate('+now+'deg)');
            $(this).css('transform','rotate('+now+'deg)');
        },
        duration:'slow'
    },'linear');
});

i show someone's code and using it but it doesn't rotate on - code when i type +45, it rotate hover and unhover but type -45 it rotate hover but unhover, it doesn't rotate smoothly

sorry to my english i don't use Eng to my mother language

Answer 1

It is happening because in the jQuery animate function of the un-hover part the initial value of borderSpacing is 0 and you are going to 0. You can validate this using console.log on the step function to print out now and fx . Don't use borderSpacing since it points to a valid CSS property which SHOULD not be negative (Source - http://www.w3schools.com/cssref/pr_border-spacing.asp Look at the Property Values heading, value length .).

Just use a pseudo property like rotate which works successfully here -

https://jsfiddle.net/zasmLkzm/10/

Hope this helps.