Jquery 动画在我的网站上给我奇怪的结果

标签 jquery css

我之前没有在任何论坛上发帖...我通常会尝试自己解决问题。但是我在一个网站上遇到了一个问题,这让我很恼火。

这是网站:http://fortiswebsystems.com/

问题:单击导航栏上的按钮时,背景图像向下跳动并缓和。我不想要这个。我已经在 Chrome、IE 和 Firefox 中对其进行了测试,结果都相同。

我一直在摆弄 Firebug 试图修复它。我认为这是由 jQuery 动画 css 函数“changePage”引起的 CSS 错误。这是函数:

function changePage ( page )
                {
                    if( $('#logo').attr('class') != 'small' )
                        {

                            $('#logo').animate ({
                                    'margin-top': '-250px',
                                    'margin-left': '-250px',
                                    height: '150px',
                                    width: '150px'
                                } , 2000 , 'easeOutBounce' , function () {
                                $('#logo').attr('class','small');
                            });
                            $('#content-flying-page').css({ 
                                    'display' : 'block' , 
                                    '-ms-filter' : "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)",
                                    'filter' : 'alpha(opacity=0)',
                                    'opacity' : '0'
                                }).animate ({
                                    '-ms-filter' : "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)",
                                    'filter' : 'alpha(opacity=100)',
                                    'opacity' : '1'
                                }, 2000 );
                        }
                        $("#content-active").fadeOut(500);
                        $.get( 'index.php' , 'ajaxPage=' + page , function (data) {
                            $("#content-active").fadeOut(500, function(){
                            $("#content-active").html(data).fadeIn(500);
                            $("#content-active").append('<div style="display:none;" id="curpage">' + page + '</div>' );
                        });
                        });
                }

我相信这与#logo 中的负边距有关。

这是一个小错误,但让我很烦。感谢您的帮助!

最佳答案

如果您将背景图片的位置设置为:

background-position: top right;

..不仅仅是在右边,它似乎工作正常。

关于Jquery 动画在我的网站上给我奇怪的结果,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/12430641/

相关文章:

css - 使用 Laravel 的 elixir 导入 CSS 文件时出现 ErrorException

javascript - clearInterval() 可以在 setInterval() 内部调用吗?

jquery - jcarousel 或任何其他类似的图像 slider

javascript - 纳米滚动不工作

jquery - 如何使 jQuery 将事件绑定(bind)到通过 Ajax 加载的元素?

jquery - 这个移动的火箭是否使用 CSS3(动画)?

html - 如何在没有固定父高度的情况下调整 div 高度以匹配兄弟 img 高度

jquery - 使用 JQuery .hide() 函数进行 URL 查询不起作用。为什么?

html - CSS形状和文本悬停改变颜色

php - 在一列中显示 3 个产品并滚动行