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

我在粘性topbar菜单中有一个标志图像，所以当向下滚动时，我试图改变图像宽度使用css过渡，但它不是与jquery窗口滚动时，我添加在CSS类标志形象，但是当我的标志图像上悬停它的工作图像宽度上的过渡不适用于窗口滚动

我的代码，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'); 
     } 
    }); 
});

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

来源

2016-04-13 Fadi

您的控制台在滚动时实际上是否充斥着数字值？如果不是，你的事件监听器不会触发。 – Paul

@Paul是的，我正在控制台中获取数字值 – Fadi

是否将类'transition“添加到？如果是，请检查'width：50％'是不是直通，可能是'.logo img'选择器更精确，所以'width：100％'覆盖'.transition'样式。在这种情况下，您需要将'.transition，.logo img：hover'更改为'.logo img.transition，.logo img：hover' –

你想要什么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; 
}

来源

2016-04-13 07:31:59

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

回答

相关问题