JQuery event only runs once and isn't repeated

user_11578345 0
Viewed 49

I have a JQuery event that i would like to repeat for each time to the mouse is scrolled. Currently it will run once, add the css and then seemingly become completely inactive.

I'm just learning JQuery, i originally was using .scroll but that would not apply the css even once so am no using .bind with the mousewheel. I've tried a .onclick event but this does the same and i don't really know what else to try.

$(document).ready(function () {
    $(window).bind('mousewheel', function() {
        $(".perspective-line p").css({
            transform: 'translate(0, -50px)',
        });
    });
});

my text is transformed once by 50px but then it is just stuck there and i want it to transform again when the mousewheel is scrolled.

edit* new script

$(document).ready(function () {
    var increasedValue = 0;
    $(window).bind('mousewheel', function() {
        increasedValue += 50;
        $(".perspective-line p").css({
            transform: 'translate(0, -${increasedValue}px)',
        });
        console.log(increasedValue)
    });
});
css html jquery
3 Answers

Events trigger as usual. You set fixed value to CSS you could try something like that with dynamic settings:

$(document).ready(function () {
    var increasedValue = 20; 
    $(window).bind('mousewheel', function() {
    increasedValue ++;
        $(".perspective-line p").css({
            transform: `translate(0, -${increasedValue}px)`,
        });
    });
});
user_74631880

Add console.log('scroll'); in you function and you will see it fires every time you do scroll. The problem you have is that you have transform: 'translate(0, -50px)' and it is always the same value so eyes can't see it :)

user_86602190

I think your code is currently adding transform: 'translate(0, -50px)', css rule but what you probably want is to increase your translate by 50px on every mousewheel event. You would probably need to save your current transform value and then on each mousewheel even increment this value and use that incremented value inside the css rule. You also might want to check if scroll was up or down and increment or decrement your saved value.

$(document).ready(function () {
    var currentTranform = 0;
    $(window).bind('mousewheel', function() {
        currentTranform -= 50;
        $(".perspective-line p").css({
            transform: 'translate(0, currentTransform + "px")',
        });
    });
});
user_62576900
Related