圖像寬度上的過渡不適用於窗口滾動

我在粘性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

圖像寬度上的過渡不適用於窗口滾動

回答

相關問題