图像宽度上的转换不适用于窗口滚动

Transition on image width does not work with window scroll

本文关键字：不适用 适用于 窗口 滚动 转换 图像      更新时间：2024-06-05

我在粘性顶栏菜单中有一个徽标图像，所以当向下滚动时，我试图使用css转换来更改图像宽度，但当我将css类添加到徽标图像时，它无法与jquery窗口滚动一起工作，当我将光标悬停在徽标图像上时，它可以工作

我的代码css

.logo img
{
    width: 100%;
    transition:width  1s ease;
    -moz-transition: width 1s ease;
    -ms-transition: width 1s ease;
    -webkit-transition: width 1s ease;
    -o-transition: width 1s ease;
}
.transition , .logo img:hover{
    width: 50%;
    transition:width  1s ease;
    -moz-transition: width 1s ease;
    -ms-transition: width 1s ease;
    -webkit-transition: width 1s ease;
    -o-transition: width 1s ease;
}

js代码

$j = jQuery.noConflict();
$j(function(){
    $j(window).on("scroll", function () {
        if ($j(this).scrollTop() > 100) {
            $j('.logo img').addClass('transition');
            console.log($j(this).scrollTop());
        } else {
            $j('.logo img').removeClass('transition');
            console.log('cvc');
        }
    });
});

请帮忙，并提前表示感谢。

你想要这样的东西吗？

只是稍微更改了一下选择器。由于.logo img的继承性，.transition不足以擦除.logo img的属性。

.logo img
{
    width: 100%;
    transition:width  1s ease;
    -moz-transition: width 1s ease;
    -ms-transition: width 1s ease;
    -webkit-transition: width 1s ease;
    -o-transition: width 1s ease;
}
.logo .transition{
    width: 50%;
    transition:width  1s ease;
    -moz-transition: width 1s ease;
    -ms-transition: width 1s ease;
    -webkit-transition: width 1s ease;
    -o-transition: width 1s ease;
}
相关文章：