Transition on image width does not work with window scroll

0
votes

i have a logo image in sticky topbar menu so when scrolling down i'm trying to change the image width using css transition but it is not working with jquery window scroll when i add the css class to logo image but when i hover on the logo image it work

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

please any help and many thanks in advance.

1
javascriptjqueryhtmlcss
Is your console actually flooded with numeric values when scrolling? If not, your event listener is not firing. - Paul
@Paul yes i'm getting the numeric values in the console - Fadi
Is class transition added to <img>? If yes, check if width: 50% is not strike thru, may be .logo img selector is more precise so width: 100% overrides .transition style. In that case you will need to change .transition , .logo img:hover to .logo img.transition , .logo img:hover - Przemysław Melnarowicz

1 Answers

1
votes

You wants something like this ?

Just changed your selectors a bit. Because of the inheritance of .logo img, .transition wasn't suffisant to erase .logo img properties.

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