Resim genişliğinde geçiş, pencere kaydırma ile çalışmaz

Question

Yapışkan üst çubuk menüsünde bir logo resmim var, böylece aşağı inerken resim genişliğini css geçişi ile değiştirmeye çalışıyorum ama eklediğimde jQuery penceresi kaydırma ile çalışmıyor. i logosu görüntüye getirdiğinizde logosu görüntüye css sınıfı ama

benim kod 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 kodu

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

lütfen herhangi bir yardım ve çok teşekkürler işe önceden.

Answer 1

like this bir şey mi istiyorsunuz?

Sadece seçicilerinizi biraz değiştirdim. .logo img'un mirasından dolayı, .transition, .logo img özelliklerini silmek için yeterli değildi.

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