javascript - jQuery UI bounce effect aligns elements left in Firefox and IE8 - Stack Overflow

admin管理员组

文章数量:1296329

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?

The problem is exhibited in Firefox and Chrome. The popup asks if you received an invitation. 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

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?

The problem is exhibited in Firefox and Chrome. The popup asks if you received an invitation. 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

• javascript
• jquery
• html
• jquery-ui

Share Follow edited Jan 10, 2020 at 22:19 halfer 20.5k1919 gold badges109109 silver badges202202 bronze badges asked Feb 22, 2011 at 16:27 ChevCastChevCast 59.2k6666 gold badges221221 silver badges325325 bronze badges

Add a ment  | 

1 Answer 1

Sorted by: Reset to default 10

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...

本文标签： javascriptjQuery UI bounce effect aligns elements left in Firefox and IE8Stack Overflow