Question

我在这里完全失败了。我将在下面提供我目前所拥有的内容，但出于某种原因，我尝试的每次迭代都会出错...要么滚动动画不起作用而其他功能都有效，滚动动画确实有效但其他功能不起作用，一切都行不通，或者一切都行不通，但动画闪烁......

我试图尽我所能评论所有内容，如果我在一个位置或另一个位置使用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...
});

Answer 1

问题似乎是将焦点设置到输入元素，在动画后设置它应该没问题

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

演示：Fiddle

scrollTop的（）;动画问题

1 个答案: