Convert CSS transition to Jquery

What all you need to do is to add an event on your class, and then attach animate method to it. you can see these kind of examples of learn.jquery.com as well.

$(".classname").on({
    mouseenter : function(){
        $(this).animate({
            width : 700
        });
    },
    mouseleave : function(){
        $(this).animate({
            width : 470
        });
    }
});

jsfiddle: http://jsfiddle.net/w5pRy/1/

Try this solution

$('body').on('mouseenter', '.classname', function(){
   $(this).animate({width : 700});
}).on('mouseleave', '.classname', function(){
  $(this).animate({width : 470});
})

$(".classname").hover(function () {
        $(this).animate({
            width: "300px"
        });
    }, function () {
        $(this).animate({
            width: "100px"
        });

    });

working Fiddle

$(document).ready(function(){

   $(".classname").hover( function(){
   $(this).delay(2000).animate({width : 700px});
   }, function(){
   $(this).delay(2000).animate({width : 470px});
   });

});

Try this:

http://jsfiddle.net/aamir/QGc8h/

HTML:

css:<br/>
<div class='classname'>some content</div>
jquery:<br/>
<div class='jqclassname'>some content</div>

CSS:

.jqclassname, .classname {
    border: 1px solid red;
    width : 470px;
}

.classname { 
    transition: all 2s ease 0s;
}

.classname:hover {
    width : 700px;
}

JS:

$(function(){
    $('.jqclassname').hover(
        function(){
            $(this).stop().animate({width: 700}, 2000);
        },
        function(){
            $(this).stop().animate({width: 470}, 2000);
        }
    )
});

You should try hover() with animate(). try this:

$(".classname").hover( function(){
 $(this).animate({width : '700px'});
}, function(){
 $(this).animate({width : '470px'});
})

Here is working demo