微信公众号搜"智元新知"关注
微信扫一扫可直接关注哦!

从jquery调用一个css3转换

CSS3转换很棒!到目前为止,我通过以下方式触发它们:hover或:样式表中的活动声明.我正在寻找是否有办法从jquery触发它们.

例如:

#MyDiv{
border:1px solid red;
background:blue;
transition: all 0.3s linear;
}

MyDiv:hover{
border:1px solid black;
background:yellow;
}

当鼠标在MyDiv上移动时,鼠标移动将触发,但是我想要做的就是:

$('#MyDiv').transition(hover); //that would be ideal

换句话说,我想触发css动画,如果我将鼠标悬停在其他div上,#MyDiv动画将以$(‘#SomeOtherDiv’)触发.mouseenter(function(){$(‘#MyDiv’) .transition(hover);});

jquery动画功能不支持颜色转换,而我知道您可以添加jqueryUI插件使其正常工作,我想知道是否有一些方法可以使其无效,使用jquery调用css转换.

谢谢.

解决方法

#MyDiv {
    border:1px solid red;
    background:blue;
    transition: all 2.0s linear;
    -webkit-transition: all 0.3s linear;
    -moz-transition: all 0.3s linear;
    -ms-transition: all 0.3s linear;
    -o-transition: all 0.3s linear;
}

.hover{
    border:1px solid black;
    background:yellow;
    transition: all 2.0s linear;
    -webkit-transition: all 0.3s linear;
    -moz-transition: all 0.3s linear;
    -ms-transition: all 0.3s linear;
    -o-transition: all 0.3s linear;
}

$("#MyOtherDiv")
.mouseenter(function(){
    $("#MyDiv").addClass("hover");
})
.mouseleave(function(){
    $("#MyDiv").removeClass("hover");
});

原文地址:https://www.jb51.cc/jquery/179318.html

版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。

相关推荐