Question

当鼠标悬停在content div上时，我想制作一个非常常见的过渡效果，content div的背景图像亮起，div滑动中的info标题从左边开始。但是，因为我有12个，所以我不能将每个人命名为class / id，所以我不能（或者我不知道正确的方法）在css中执行它们。

然后我尝试了jquery，并使用了

$(".container>.content").hover(function() { 

        $(this).find('.info').animate({
            "right": 0,
            "opacity": 1
        },200);
        $(this).find('img').animate({
            "opacity": 1
        },200);
    }, function() {
        $(this).find('.info').animate({
            "right": $(this).outerWidth(),
            "opacity": 0
        },200);
        $(this).find('img').animate({
            "opacity": 0
        },200);

    });

（我有12个container div，每个div都有一个content和一个info类

基本上是鼠标悬停和鼠标移动的两组动画。

问题在于，与css过渡不同，在鼠标进入/离开区域后，效果将在当前帧处反转，jquery中的动画必须等到整个动画结束，这实际上不是在我的案例中工作。

有没有办法解决这个问题？

谢谢！

Answer 1

如果我正确理解你，你可以通过CSS转换和使用:hover相当容易地做到这一点。请参阅 this working model 。

CSS：

.content {
    font-size: 1.2em;
    padding: 5em;
}
.content .info {
    opacity: 0;
    transform: translateX(-100vw);
    transition: opacity .4s, transform .4s;
}
.content img {
    opacity: 0;
    transition: opacity .4s;
}
.content:hover .info {
    opacity: 1;
    transform: translateX(0);
}
.content:hover img {
    opacity: 1
}

如何使转换效果像css转换一样执行？

1 个答案: