Question

我在粘贴的顶部栏菜单中有一个徽标图像所以当向下滚动时我试图使用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 code

$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');
        }
    });
});

请提前帮助并多多感谢。

Answer 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;
}

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

1 个答案: