jQuery UI problem: why do the elements go flying around the screen?_问答_开发者

jQuery UI problem: why do the elements go flying around the screen?

开发者 https://www.devze.com 2022-12-27 22:56 出处：网络

Yes, I know the title sounds a little suspicious. I will try to explain this the best I can... The code below is supposed to have the blue div slide down beside the red div. (Directly to the right -

Yes, I know the title sounds a little suspicious. I will try to explain this the best I can...

The code below is supposed to have the blue div slide down beside the red div. (Directly to the right - using the position() utility of jQuery UI) The first time you hit the Show the div button, it works. Also, the Hide the div works.

Then when I click to show the div again, it appears to the right of where it is supposed to be! Why is this?!?

Note: You can find a live example of the code here

<html>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<title>Demo</title>
<style type='text/css'>

#red {
    background-color: red;
    width: 200px;
    height: 150px;
    position: absolute;
}

#blue {
    background-color: blue;
    width: 150px;
    height: 200px;
    posit开发者_C百科ion: absolute;
    display: none;
}

#tester_1 {
    top: 300px;
    left: 300px;
    position: absolute;
}

#tester_2 {
    top: 350px;
    left: 300px;
    position: absolute;
}

</style>
</head>
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript" src="jqueryui.js"></script>
<script type='text/javascript'>

function Show()
{
    $('#blue').position({
            of: $('#red'),
            my: 'left top',
            at: 'right top'}).slideDown();
}

function Hide()
{
    $('#blue').hide();
}

</script>
<body>
<div id='red'></div>
<div id='blue'></div>
<button id='tester_1' onclick='Show()'>Show the <kbd>div</kbd></button>
<button id='tester_2' onclick='Hide()'>Hide the <kbd>div</kbd></button>
</body>
</html>

Try just resetting the blue div... I did this and it appears to work on Chrome and IE now.

function Hide()
{
    $('#blue').css({ left: 0, top: 0 }).hide();
}

function Show()
{
    $('#blue').position({
            of: $('#red'),
            my: 'left top',
            at: 'right top'})
    .slideDown();
}

I can't figured out what's with the parameters of your position.
Try to cut that to

   function Show()
    {
        $('#blue').slideDown();
    }

and it will work.

EDIT

based on additional comments try this

$(function(){
   $('#blue').position({
            of: $('#red'),
            my: 'left top',
            at: 'right top'})
})
function Show()
{
    $('#blue').slideDown();
}

function Hide()
{
    $('#blue').hide();
}

It looks like youre trying to use jQuery UI position, but you did not reference it

http://jqueryui.com/demos/position/

Any measurement you make (directly or via jQuery UI) when the element is hidden (using display:none) is going to yield 0. This can lead to funny results if you assume the element is visible.

In your example, you are positioning the element when it is not in the display list and then doing slideDown() and that's what is causing the problem.