图像宽度的过渡不适用于窗口滚动答案

【问题标题】：Transition on image width does not work with window scroll图像宽度的过渡不适用于窗口滚动
【发布时间】：2016-04-13 15:31:59
【问题描述】：

我在置顶栏菜单中有一个徽标图像，所以当我向下滚动时，我尝试使用 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');
        }
    });
});

请提前提供任何帮助，非常感谢。

【问题讨论】：

您的控制台在滚动时实际上是否充满了数值？如果没有，你的事件监听器没有触发。
@Paul 是的，我正在控制台中获取数值
类 transition 添加到了吗？如果是，请检查width: 50% 是否没有通过，可能.logo img 选择器更精确，因此width: 100% 覆盖.transition 样式。在这种情况下，您需要将 .transition , .logo img:hover 更改为 .logo img.transition , .logo img:hover

标签： javascript jquery html css

【解决方案1】：

你想要like this的东西吗？

只是稍微改变了你的选择器。由于.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;
}

【讨论】：