ウィンドウのスクロールで画像の幅を変更できない

Question

スクロールバーのメニューにロゴ画像があるので、スクロールするときに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'); 
     } 
    }); 
}); 

してください任意のヘルプや多くのおかげで働きます あらかじめ。

Answer 1

あなたは何かを望みますlike this？

セレクタを少し変更しました。 .logo imgの継承のため、.logo imgのプロパティを消去するには、.transitionはありませんでした。

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