CODEWITHSUNDEEP
jquerycsscss-transitions
user3214712
user3214712

Reputation: 273

Convert CSS transition to Jquery

I want to convert my CSS transition to Jquery

My CSS transition is this : 

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

.classname:hover {
width : 700px;
}

this mean the CSS code , changes the width of element .

So, How can i do that with Jquery ?

Upvotes: 0

Views: 117

Answers (6)

Zaheer Ahmed
Zaheer Ahmed

Reputation: 28588

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

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

Here is working demo

Upvotes: 0

Aamir Afridi
Aamir Afridi

Reputation: 6411

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);
        }
    )
});

Upvotes: 0

Sam1604
Sam1604

Reputation: 1489

$(document).ready(function(){

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

});

Upvotes: 0

Ashish Kumar
Ashish Kumar

Reputation: 3039

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/

Upvotes: 1

Green Wizard
Green Wizard

Reputation: 3667

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

    });

working Fiddle

Upvotes: 0

Pesulap
Pesulap

Reputation: 894

Try this solution 

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

Upvotes: 0

Related Questions