JQuery UI反弹效果将Firefox和IE8中的元素对齐 [英] JQuery UI bounce effect aligns elements left in Firefox and IE8

问题描述

在firefox和IE8或更低版本中，JQuery UI的反弹效应存在问题。 IE9，Chrome和Safari会正确显示反弹效果。任何想法是什么导致这种情况？

要查看问题的示例，可能最容易转到我正在处理的网站。在firefox和chrome中访问 http://www.AlexAndNikki.net 。观看弹出窗口询问您是否收到邀请，然后您会看到我的意思。在firefox / ie8中，跳转到左侧。

以下是运行跳转的jquery：

  if（$ .readCookie（'noticehidden'）== null）
 {
 $（'＃notice'）。show（' （'bounce'），setInterval（function（）
 {
 $（'＃notice'）。effect ，{times：3，distance：10}，300）; 
}，5000））; 
 $（'＃dismissnotice'）。click（function（e）
 {
 clearInterval（$（'＃notice'）。data（'bounceinterval'））; 
 $ （'#notice'）。hide（'drop'，{direction：'right'}，2000）; 
 $ .setCookie（'noticehidden'，'true'，{duration：365}）; 
 e.preventDefault（）; 
返回false; 
}）; 
} 
  

我正在使用JQuery 1.4.4和JQuery UI 1.8.6

任何帮助都是值得赞赏的。 解决方案 弹跳效果将此样式应用于元素：

  element.style {
 bottom：auto; 
剩下：0; 
职位：亲属; 
 right：auto; 
 top：0; 
} 
  

Firefox不理会 margin：auto 支持 left：0 。
这解决了问题：

  #notice {
 margin-left：300px; 
} 
  

而对于可变宽度的框：

 ＃notice-container {
 text-align：center; 
} 
 
 #notice {
 display：inline-block; 
 
  

编辑：首先

 ＃notice-container 
 {
 text-align：center; 
 display：none; / *添加它以使父项在使用显示效果之前不可见* / 
} 
  

<接下来，问题中的上述JQuery应该被修改为使用父容器，而不是中心的子容器。

  $（ '＃notice-container'）。show（'drop'，{direction：'right'}，2000）; 
 $（'＃notice-container'）。effect（'bounce'，{times：3，distance：10}，300）; 
 //等等... 
  

There is an issue with JQuery UI's bounce effect in both firefox and IE8 or lower. IE9, Chrome, and Safari render the bounce effect properly. Any ideas what is causing this?

To see a sample of the problem it might be easiest to just go to the site I'm working on. Visit http://www.AlexAndNikki.net in firefox and chrome. Watch the popup asking if you received an invitation and you'll see what I mean. In firefox/ie8 the box jumps to the left-hand side when it bounces.

Here is the jquery that is running the bounce:

            if ($.readCookie('noticehidden') == null)
            {
                $('#notice').show('drop', { direction: 'left' }, 2000)
                .data('bounceinterval', setInterval(function ()
                {
                    $('#notice').effect("bounce", { times: 3, distance: 10 }, 300);
                }, 5000));
                $('#dismissnotice').click(function (e)
                {
                    clearInterval($('#notice').data('bounceinterval'));
                    $('#notice').hide('drop', { direction: 'right' }, 2000);
                    $.setCookie('noticehidden', 'true', { duration: 365 });
                    e.preventDefault();
                    return false;
                });
            }

I am using JQuery 1.4.4 and JQuery UI 1.8.6

Any help is appreciated.

解决方案

Bounce effect applies this style to the element:

element.style {
    bottom: auto;
    left: 0;
    position: relative;
    right: auto;
    top: 0;
}

Firefox disregards margin:auto in favor of left:0. This fixed the problem:

#notice {
  margin-left: 300px;
}

And for variable-width box:

#notice-container {
  text-align: center;
}

#notice {
  display: inline-block;
}

EDIT: For anyone that uses this answer I wanted to add a couple minor tweaks that made it work.

First

    #notice-container
    {
      text-align: center;
      display: none; /*Add this to make the parent invisible until the show effect is used.*/
    }

Next, the above JQuery in the question should be modified to use the parent container, not the centered child.

$('#notice-container').show('drop', { direction: 'right' }, 2000);
$('#notice-container').effect('bounce', { times: 3, distance: 10 }, 300);
// etc...

这篇关于JQuery UI反弹效果将Firefox和IE8中的元素对齐的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！