jQuery setTimeout с анимацией - PullRequest
Новая
       4

jQuery setTimeout с анимацией

2 голосов
/ 17 ноября 2011

У меня есть некоторый набор CSS, который через 2 секунды я хочу вернуть на свои определенные позиции.

Я использую это: 

setTimeout(function() {
        $("div").css("z-index", "");
        $("div").css("height", "");
        $("div").css("width", "");
        $("div").css("marginLeft", "");
        $("div").css("marginTop", "");
}, 2000 );

Так что, в основном, это отправляет пять различных элементов div обратно в места по всей странице через 2 секунды. На нагрузке они делают это: 

$(document).ready(function() {
        $("div").css("z-index", "");
        $("#tablet,#phone,#television,#web,#social,#fusion").css({
            width: "500px",
            height: "350px",
            marginLeft: "30%",
            marginTop: "25px",
        }, 750);
});

Мне было интересно, знаете ли вы, ребята, как оживить события через 2 секунды. Прямо сейчас это происходит быстро, но я бы хотел, чтобы это было анимацией, возвращающейся к их начальному состоянию.

Я использовал это, чтобы оживить все 5 делений в одной области: 

$("#tablet,#phone,#television,#web,#social,#fusion").animate({
            width: "500px",
            height: "350px",
            marginLeft: "30%",
            marginTop: "25px",
        }, 750);

Спасибо!

Ответы [ 3 ]

1 голос
/ 17 ноября 2011

Если я правильно понимаю ваш вопрос, у вас есть куча элементов в «естественных» позициях на странице. Вы хотите переместить их на новую позицию, а затем вернуть их на свои исходные позиции.

Если оставить в стороне вопрос об анимации, одним из решений будет захват исходной позиции каждого элемента и других атрибутов и сохранение этой информации в самом элементе с использованием data(). В вашей функции «сброс» вы можете ссылаться на эти данные для сброса каждого элемента. Итак, как-то так (не проверено): 

// in your $(document).ready() handler:
$('div').each( function () {
  var original = {
    w: $(this).width(),
    h: $(this).height(),
    o: $(this).offset()
  };
  $(this).data('orig', original);
});

Каждый div теперь знает, откуда он взялся. Затем вы перемещаете их, как хотите. Когда пришло время их вернуть: 

var backToOriginal = function() {
  $('div').each( function () {
    var $d = $(this).data('orig');
    $(this).animate({
      'top': $d.o.top,
      'left': $d.o.left,
      'width': $d.w,
      'height': $d.h
    });
  });
};
setTimeout(backToOriginal, 1000); // animate to original position after 1 sec

Изменение анимации и задержек по вкусу.

Вот рабочий пример: http://jsfiddle.net/redler/LQyeh/

Изначально элементы рассредоточены случайным образом (в вашем случае они будут в своих естественных положениях в соответствии с вашей разметкой). Когда вы запускаете процедуру, они видоизменяются и перемещаются в одну позицию. После задержки они плавно возвращаются в исходное положение и размер.

1 голос
/ 17 ноября 2011

Назовите меня сумасшедшим, но, похоже, у вас есть ответ на свой вопрос здесь.Вы уже знаете, как использовать jquery animate, так почему бы не использовать его вместо переопределения CSS в вашем setTimeout? 

setTimeout(function() {
        $("#tablet,#phone,#television,#web,#social,#fusion").animate({
            width: "0px",
            height: "0px",
            marginLeft: "0%",
            marginTop: "0px",
        }, 750);
}, 2000 );

Я неправильно прочитал ваш вопрос?Или вы не хотите, чтобы ваши элементы имели ширину и высоту 0px, но вы хотите, чтобы эти объявления css были полностью удалены?

EDIT

Ok,так что согласно вашему объяснению вы хотите, чтобы они вернулись в свои уже определенные состояния.Я предполагаю, что вы имеете в виду ДО оператора onload, который переопределяет их позицию, верно?Означает ли это, что вы работаете с пониманием того, что предыдущее состояние неизвестно и является абстрактным, и вы хотите знать, как получить эту информацию?Или вы имеете в виду очень просто, что вы знаете состояние, в которое вы хотите, чтобы оно вернулось, и просто не знаете, как настроить его для анимации там?

css file: 

#div{
    margin-left:20%;
    margin-top:20%;
}

jquery: 

$(document).ready(function(){
    $('#div').css({marginTop:'50%', marginLeft:'50%'});


    setTimeout(function() {
        $("#div").animate({
            marginLeft: "20%",
            marginTop: "20%",
        }, 750);
    }, 2000 );
});

Так было бы, если бы вы знали, к какому желательному CSS вернуться.Если бы вы НЕ знали, вы могли бы сделать что-то вроде этого: 

$(document).ready(function(){
    var div = new Array();
    div.push($('#div').css('margin-top'));
    div.push($('#div').css('margin-left'));

    $('#div').css({marginTop:'50%', marginLeft:'50%'});


    setTimeout(function() {
        $("#div").animate({
            marginLeft: div[0],
            marginTop: div[1],
        }, 750);
    }, 2000 );
});
0 голосов
/ 17 ноября 2011

В этой ситуации я опирался на метод клонирования jQuery. Вы можете скрыть оригинальный элемент и использовать клон для анимации. Чтобы восстановить оригинал, просто уничтожьте клона и раскройте оригинал.

Документация клона

...