Проблемы с анимацией в jQuery

Question

Это довольно сложно объяснить, поэтому я вставлю функцию и объясню, что она делает

function close(r){
    if(r !== undefined){
        $('#close').attr('name','1');
        $('#close').css({
            top: 30,
            left: 30
        });
        $('#close').html('First click here');
    }else{
        switch($('#close').attr('name')){
            case '1':
                $('#close').attr('name','2');
                $('#close').animate({
                    bottom: 30,
                    right: 30
                },1000);
                $('#close').html('Now click here');
            break;
            case '2':
                $('#close').attr('name','3');
                $('#close').animate({
                    bottom: 30,
                    left: 30
                },1000);
                $('#close').html('A now click here');
            break;
            case '3':
                $('#close').attr('name','4');
                $('#close').animate({
                    top: 30,
                    right: 30
                },1000);
                $('#close').html('And finally click here');
            break;
            case '4':
                $('#close').remove();
            break;
        }
    }
}

Если вам требуется объяснение, вот оно:

1. Функция закрытия сначала вызывается как close(1). Это устанавливает верхнюю позицию: 30 и левую: 30. Обратите внимание, что ее позиция уже установлена ​​на абсолютную в таблице стилей. Эта первая часть работает, и там, где я выберу место, ей подчиняются.
2. Элемент #close имеет oclick, назначенный на close(). Как вы видите, каждый раз, когда на него нажимают, происходит другое действие. Все работает нормально (т. Е. Атрибуты html и name меняются), за исключением анимации. Элемент #close остается неподвижным.
3. При последнем щелчке элемент успешно исчезает.

У кого-нибудь есть идеи?

Приветствия

Gausie

Answer 1

Первый раз, когда вы установили left: 30px. Второй раз вы установили right: 30px. Но left: 30px все еще установлен. Они не являются эксклюзивной собственностью; Предполагается, что при установке обоих элементов элемент расширяется в соответствии с расстоянием между левым краем 30 пикселей и правым краем 30 пикселей.

Однако я предполагаю, что у вас есть фиксированная ширина элемента close. Это оставляет left: 30px; right: 30px; width: 100px, который чрезмерно ограничен , в результате чего свойство right игнорируется, не вызывая движения. То же самое касается top / bottom / height.

Для анимации между выровненными по левому и правому краю позициями вам потребуется написать только один из left или right. Чтобы выяснить, какой будет позиция пикселя left для позиции, выровненной по правому краю, вам нужно взглянуть на размер содержащего элемента блока. Предполагая, что содержащий блок является целым документом:

<div id="close" style="background: red; position: absolute; width: 100px; height: 50px;">foo</div>
<script type="text/javascript">
    var close_step= 0;
    $('#close').click(function() {
        if (close_step>=4) {
            $(this).remove();
            return;
        }
        var w= $(window).width()-$(this).width()-30*2;
        var h= $(window).height()-$(this).height()-30*2;
        var x= [0, 1, 0, 1][close_step]*w+30;
        var y= [0, 1, 1, 0][close_step]*h+30;
        var pos= {left: x+'px', top: y+'px'};
        if (close_step===0)
            $(this).css(pos);
        else
            $(this).animate(pos);
        $(this).text([
            'First click here', 'Now click here', 'And now click here', 'And finally click here'
        ][close_step]);
        close_step++;
    }).click();
</script>

Если бы #close были вложены в блок с position, вам нужно смотреть на ширину / высоту этого блока вместо window.