转换不适用于 jQuery答案

【问题标题】：transform does not work with jQuery转换不适用于 jQuery
【发布时间】：2017-04-24 14:07:36
【问题描述】：

我正在使用 owl carousel 2。当鼠标悬停时，我想将 Owl-Stage 转换为右侧。它适用于 CSS。

.owl-stage:hover {
    -webkit-transform: translate3d(-1280px, 0, 0) !important;
    transform: translate3d(-1280px, 0, 0) !important;
    transition: 450ms transform, 450ms -webkit-transform;
}

因为 translate3d 值 (-1280px) 由 owl carousel 动态更改。我需要检查一下 jQuery。

    $('.owl-stage').hover(function () {
        console.log('stage overed');

        normalanimation = $(this).css('transform').split(',')[4];
        var animation = parseInt(normalanimation) + (-112);
        console.log(animation);
        //$(this).transition({ x: '-40px' });
        $(this).css({ "transform": "translate3d(" +animation+ "px, 0, 0) !important;", "transition": "transform 450ms"});
    });

我使用了许多其他方式，例如 atrr 样式。但没有运气。还是 jQuery 不支持 css 转换？

【问题讨论】：

您可以尝试使用切换类而不是内联样式吗？ api.jquery.com/toggleclass
animation 在控制台打印出什么？你在 DOM 属性中看到了什么？
@SyedFarhan 我不能使用切换类，因为 translate3d 值是在我单击导航按钮或拖动项目时由 owl carousel 动态设置的。
@Justinas 动画是数值。它是正确的。我想按这个值移动 owl-stage。

标签： jquery css owl-carousel

【解决方案1】：

您不能使用.css() 方法，而"!important" jQuery 只是没有正确理解它，所以它被忽略了。

尝试使用 .attr() 方法更新

$(this).attr("style", "transform:translate3d(" +animation+ "px, 0, 0)!important; transition:transform 450ms");

【讨论】：

谢谢。但它覆盖了owl-stage的原始属性。是否可以只修改变换值？
好的，所以首先获取现有样式并附加新样式。例如： $(this).attr("style", $(this).attr("style")+";transform:translate3d(" +animation+ "px, 0, 0)!important; transition:transform 450ms") ;