jquery 动画效果有问题

发布于 2024-12-15 07:33:41 字数 342 浏览 3 评论 0原文

此处为实时示例

按任意按钮。你能看到摇晃的下滑效果吗？事实上它必须是平稳且缓慢地滑落。
如果您已按任何按钮一次，请尝试按另一个按钮。表单的显示和隐藏动画很糟糕。

动画期间。在此处输入图像描述

动画之后。动画后的结果

如何解决此问题？

原文

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

慵挽 2024-12-22 07:33:41

当选项卡中的每个元素隐藏或显示时，似乎会发生抖动。

获取每个选项卡的高度，并将调整大小动画实现到这些高度，而不是在每个元素隐藏或显示后单独设置动画。

回复收藏 0 原文

情归归情 2024-12-22 07:33:41

尝试使用 .animate() 和 .fadeIn() .fadeOut() .fadeTo(time,opacity) code> 而不仅仅是 .show() 或 .hide()

回复收藏 0 原文

ゃ人海孤独症 2024-12-22 07:33:41

对我来说加载得很好。然而，它首先加载确实花了很长时间。如果您访问：http://gtmetrix.com/reports/tural.no- ip.org/ANBNA45n 您会发现您的页面加载速度非常缓慢，并且您看到的卡顿效果可能是由于您的计算机出现了传入信息量的问题。

回复收藏 0 原文

白日梦 2024-12-22 07:33:41

您可以尝试通过减少 $(selector) 调用来加快速度..当您多次使用它们时缓存一些 jQuery 对象...还记得您可以在 jQuery 对象上链接函数.. jQO .addClass("foo").removeClass("bar"); 与jQO.addClass("foo"); 相同jQO.removeClass("bar");

就像这样......

(function(){
    var signin = $("#signin"), signup = $("#signup"), signin_f = $("#signin_form"), holder = $("#holder"), signup_f = $("#signup_form"), f_container = $("#form_container");
    $(".button").click(function () {
        if (counter === 0) {
            signin.removeClass('default_radius').addClass('right_radius');
            signup.removeClass('default_radius').addClass('left_radius');
            $("#first").animate({
                marginTop: "-=150px",
            }, 500);
        }
    });
    signup.click(function () {
        if (counter === 0) {
            holder.addClass('red_border').slideDown("slow");
            f_container.show();
            signup_f.show(0);
        } else {
            signin_f.hide(0);
            holder.switchClass( "green_border", "red_border", 1000 );
            f_container.animate({height:"260px"},1000);
            signup_f.show(0);
        }
        counter++;
    });
    signin.click(function () {
        if (counter === 0) {
            holder.addClass('green_border').slideDown("slow");
            f_container.show();
            signin_f.show(1000);
        } else {
            signup_f.hide(0);
            holder.switchClass( "red_border", "green_border", 1000 );
            f_container.animate({height:"110px"},1000);
            signin_f.show(0);
        }
        counter++;
    }); 
})();

You can try and speed things up a bit by making less $(selector) calls.. cache some of your jQuery objects when you are using them multiple times... also remember you can chain functions on jQuery objects.. jQO.addClass("foo").removeClass("bar"); is the same as jQO.addClass("foo"); jQO.removeClass("bar");

like so...

(function(){
    var signin = $("#signin"), signup = $("#signup"), signin_f = $("#signin_form"), holder = $("#holder"), signup_f = $("#signup_form"), f_container = $("#form_container");
    $(".button").click(function () {
        if (counter === 0) {
            signin.removeClass('default_radius').addClass('right_radius');
            signup.removeClass('default_radius').addClass('left_radius');
            $("#first").animate({
                marginTop: "-=150px",
            }, 500);
        }
    });
    signup.click(function () {
        if (counter === 0) {
            holder.addClass('red_border').slideDown("slow");
            f_container.show();
            signup_f.show(0);
        } else {
            signin_f.hide(0);
            holder.switchClass( "green_border", "red_border", 1000 );
            f_container.animate({height:"260px"},1000);
            signup_f.show(0);
        }
        counter++;
    });
    signin.click(function () {
        if (counter === 0) {
            holder.addClass('green_border').slideDown("slow");
            f_container.show();
            signin_f.show(1000);
        } else {
            signup_f.hide(0);
            holder.switchClass( "red_border", "green_border", 1000 );
            f_container.animate({height:"110px"},1000);
            signin_f.show(0);
        }
        counter++;
    }); 
})();

回复收藏 0 原文

~没有更多了~