Question

我想将我的CSS转换转换为Jquery

我的CSS过渡是这样的：

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

.classname:hover {
width : 700px;
}

这意味着CSS代码，改变元素的宽度。

那么，我怎么能用Jquery做到这一点？

Answer 1

您需要做的就是在课程中添加一个事件，然后将animate方法附加到它上面。你也可以看到这些learn.jquery.com的例子。

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

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

Answer 2

您应该使用hover()尝试animate()。试试这个：

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

Here is working demo

Answer 3

试试这个解决方案

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

Answer 4

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

    });

工作Fiddle

Answer 5

$(document).ready(function(){

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

});

Answer 6

试试这个：

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

将CSS转换转换为Jquery

6 个答案: