Вопросы Теги

Как получить очень конкретную анимацию для отображения div [duplicate]

Со стандартным отражением нет, но есть библиотека, которая может сделать это за вас: objenesis .

Он специально предназначен для создания экземпляров классов без конструкторов по умолчанию и используется другими библиотеками сериализации, такими как xstream .

Примечание: конструктор может не вызываться в эти случаи (но это, по-видимому, то, что вы хотите).

1
задан The Alpha 25 July 2013 в 14:48
поделиться

2 ответа

Сделал рабочую скрипку для вас: http://jsfiddle.net/U4nRq/1/

EDIT: исправить это, чтобы возвращаемый размер был постоянным: 

    var speed = 300;

    for (var i = 0; i < 4; i ++) {
        $("#box" + i).attr("stored_h",  $("#box" + i).css('height'));
        $("#box" + i).attr("stored_w",  $("#box" + i).css('width'));
        $("#box" + i).attr("stored_left",  $("#box" + i).children().css('left'));
        $("#box" + i).attr("stor_top",  $("#box" + i).children().css('top'));
    }

$('div').hover(
    function() {
        $(this).stop().css({'zIndex':'5'}).animate({
            height : $(this).children().css('height'),
            width : $(this).children().css('width')
        }, speed);
        $(this).children().animate({
            left : '0',
            top : '0'
        }, speed);
    },
    function() {
        $(this).stop().css({'zIndex':'0'}).animate({
            height : $(this).attr("stored_h"),
            width : $(this).attr("stored_w")
        }, speed);
        $(this).children().animate({
            left : $(this).attr("stored_left"),
            top : $(this).attr("stored_top")
        }, speed);
    }
);

Fiddle: http://jsfiddle.net/U4nRq/9/

5
ответ дан Naoe 15 August 2018 в 15:43
поделиться
  • 1
    Хороший ответ, но вам не хватает & quot; в вашем втором поле (например, OP), и вы также удалили одно из изображений ... – Zach Saucier 25 July 2013 в 14:50
  • 2
    Отлично сработано! но почему я не могу использовать массив? – Thang 26 July 2013 в 02:22
  • 3
    Thang: Вы можете использовать массив, но в этом случае вам действительно не нужно. Поскольку вы помещаете событие зависания во всех div. Если вы этого не хотите, вы все равно можете использовать класс. Если вы хотите использовать массив, вы должны поместить событие в div-идентификаторы (но это выглядело бы уродливым для чтения). – Naoe 26 July 2013 в 07:42
  • 4
    Zeaklous: Спасибо. Моя неряшливость преследует меня & quot; – Naoe 26 July 2013 в 07:45
  • 5
    Naoe: Спасибо, но это ошибка, что иногда div не может восстановить свой первоначальный размер после ухода курсора? Оригинал и Ошибка? – Thang 26 July 2013 в 10:58

Вы можете попробовать 

$('div').hover(
    function() {
        $(this).attr('data-width', $(this).width());
        $(this).attr('data-height', $(this).height());
        $(this).stop().css({'zIndex':'5'}).animate({
            height : $(this).children().css('height'),
            width : $(this).children().css('width')
        }, speed);
        $(this).children().animate({
            left : '0',
            top : '0'
        }, speed);
    },
    function() {
        var w = $(this).attr('data-width');
        var h = $(this).attr('data-height')
        $(this).stop().css({'zIndex':'0'}).animate({
            height : h,
            width : w
        }, speed);
        $(this).children().animate({
            left : left[i],
            top : top[i]
        }, speed);
    }
);

DEMO.

0
ответ дан The Alpha 15 August 2018 в 15:43
поделиться
Другие вопросы по тегам:

Похожие вопросы: