scrollTop ();动画的问题

scrollTop(); animation issues

本文关键字：问题 动画 scrollTop      更新时间：2023-09-26

我完全不明白。我将在下面提供我目前拥有的内容，但出于某种原因，每次我尝试迭代，都会出现问题……要么滚动的动画不工作，但其他功能工作，滚动的动画工作，但其他功能不工作，都不工作，或所有工作，但动画闪烁…

我尽我所能地注释了所有的东西，并且已经达到了这样的地步:如果我在一个位置或另一个位置使用return false;，整个函数的一部分就可以工作了，如上所述。

在一个坚果壳，我试图创建一个if/else语句，允许滚动动画以及其他功能运行所有通过点击(1)单个div。这个div，除了滚动到顶部与滚动动画，改变它的文本和应该集中在一个表单元素。

有什么建议吗?

$('.sign_in').click(function () {
    // IMPORTANT - This scrolls the page back to top if user clicks on '.sign_in' div - May need fixed as it flickers for some reason...
    $('html, body').animate({
        scrollTop: 0
    }, 350); // NOTE: Set second number to '0' to eliminate flicker - however, doing this also eliminates scroll animation speed...
    // return false; // NOTE: Having 'return false;' stated here allows for smooth scrolling without flicker but disables the rest of the functions...
    // IMPORTANT - If/Else statement changes text on '.sign_in' div
    if ($(this).text() == 'REGISTER') {
        $(this).text('LOGIN');
        // IMPORTANT - This autofocuses on form element for 'Register' form
        $('.fname').focus();
    } else {
        $(this).text('REGISTER');
        // IMPORTANT - This autofocuses on form element for 'Login' form
        $('.uname').focus();
    }
    // IMPORTANT - This flips the form if user clicks on '.sign_in' div
    $('#formContainer').toggleClass('flipped');
    // return false; // NOTE: Having 'return false;' stated here allows all functions to run but causes flicker on scroll animation...
});

问题似乎在于将焦点设置为输入元素，在动画之后设置它，它应该是好的

$('.sign_in').click(function () {
    var $this = $(this), counter = 0;
    // IMPORTANT - This scrolls the page back to top if user clicks on '.sign_in' div - May need fixed as it flickers for some reason...    
    $('html, body').animate({
        scrollTop: 0
    }, 350, function(){
        if(++counter>1){return;}
        // IMPORTANT - If/Else statement changes text on '.sign_in' div
        if ($this.text().toUpperCase().trim() == 'REGISTER') {
            $this.text('LOGIN');
            // IMPORTANT - This autofocuses on form element for 'Register' form
            $('.fname').focus();
        } else {
            $this.text('REGISTER');
            // IMPORTANT - This autofocuses on form element for 'Login' form
            $('.uname').focus();
        }
    }); // NOTE: Set second number to '0' to eliminate flicker - however, doing this also eliminates scroll animation speed...
    // IMPORTANT - This flips the form if user clicks on '.sign_in' div
    $('#formContainer').toggleClass('flipped');
    // return false; // NOTE: Having 'return false;' stated here allows for smooth scrolling without flicker but disables the rest of the functions...
    // return false; // NOTE: Having 'return false;' stated here allows all functions to run but causes flicker on scroll animation...
});

演示:小提琴

相关文章：