jQuery сворачивает исчезнувшие div и расширяет проблему анимации - PullRequest
Новая
       45

jQuery сворачивает исчезнувшие div и расширяет проблему анимации

2 голосов
/ 18 февраля 2011

Я пытаюсь анимировать изображение на полную ширину и высоту элемента div, оно работает с верхним левым изображением, как я и ожидал, но в остальных случаях оно перемещает изображение в верхний левый угол, а затем анимирует его

Вот ссылка на мой jsFiddle

Есть ли способ исчезнуть, а затем анимировать изображение с его текущего положения?

Спасибо

1012 * РЕШЕНИЕ *

Чтобы получить желаемый эффект, который работает во всех браузерах, я сделал это jsFiddle

Спасибо iWasRobbed за помощь в решении

Ответы [ 2 ]

2 голосов
/ 18 февраля 2011

Это определенно возможно, только не с функциями fadeIn или fadeOut. Вместо этого вы должны анимировать непрозрачность на абсолютно позиционированных элементах. Если вы попытаетесь использовать fadeIn или fadeOut, это ничего не даст.

Вот версия jfiddle с jQuery 1.5.0, где она работает (добавлены изображения Orbling для пользователей Firefox, которые не видят символ испорченного изображения): http://jsfiddle.net/iwasrobbed/qPkr5/1/

<!DOCTYPE html>
<html>
<style media="screen" type="text/css">
    /* positioning */
    img.topLeft {position: absolute; top: 0; left: 0;}
    img.topRight {position: absolute; top: 0; right: 0;}
    img.bottomLeft {position: absolute; bottom: 0; left: 0;}
    img.bottomRight {position: absolute; bottom: 0; right: 0;}

    /* element dimensions */
    div.work {background-color: #ddd; height:240px; position: relative; width:300px;}
    img {width:150px; height:120px; border:none;}
</style>
<body>
<div class="work">
    <a href="#"><img class="topLeft" src="http://i.stack.imgur.com/JQFbb.jpg" /></a>
    <a href="#"><img class="topRight" src="http://i.stack.imgur.com/l5OPs.jpg" /></a>
    <a href="#"><img class="bottomLeft" src="http://i.stack.imgur.com/okxQz.jpg" /></a>
    <a href="#"><img class="bottomRight" src="http://i.stack.imgur.com/4uPHw.jpg" /></a>
</div>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.5.0/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
    // prevent click jump
    $('a').click(function() {
    return false;
    });

    // do work
    $('img').hover(
    function(){
        console.log( "mouseEnter" );
        var $that = $(this);
        $(this).parent().siblings('a').animate({opacity: 0},function() {
            $that.animate({
                width: "300px",
                height: "240px"
            });
        });
    },
    function(){
        console.log( "mouseLeave" );
        var $that = $(this);
        $(this).animate({
            width: "150px",
            height: "120px"
        }, 1500, function () {
            $that.parent().siblings('a').animate({opacity: 1});
        });
    });
});
</script>
</body>
</html>
1 голос
/ 18 февраля 2011

Правильно, решил поиграть с этим, это совсем не просто достичь.

Это, насколько я могу сказать, до сих пор довольно глючно, но это отправная точка.

Демонстрация: http://jsfiddle.net/NzcZH/

Начальная компоновка

Initial Layout

Исчезновение

Fading

Рост

Growing

В полном размере

Fullsize

По сути, каждое изображение подключено к .mouseenter() (документы) / .mouseleave() (документы) событий, и делается попытка активировать требуемое изображение или деактивировать его при необходимости, если что-то уже происходит, создается примитивная очередь (которая требует исправления).

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

Изменения в модели в основном связаны с необходимостью HTML / CSS для анимации такого типа.

Если вы используете прямые .fadeIn() (документы) / .fadeOut() (документы) процедуры, эти .hide() (документы) изображения (display: none;) в конце, который удаляет их со сцены и в итоге перемещает неисчезшее активное изображение в верхний угол, что нарушает анимацию,Вместо этого лучше использовать непрозрачность и абсолютное расположение изображений, чтобы удерживать их на месте.Вы можете позволить им исчезать и прятаться, а вместо этого сбрасывать координаты перед анимацией, но это бесполезно, если вы хотите перекрытия.

В идеале, z-index следует изменить на изображениях, чтобы сохранить активный элемент.сверху, это позволило бы параллельное затухание и рост, в настоящее время это происходит поэтапно.

[Я использую подпрограмму .data() (docs) для хранениятекущее состояние, а не загрузка переменных, бит точнее.]

Структура HTML 

<div class="work">
    <img id="tl" width="150" height="120" src="http://i.stack.imgur.com/JQFbb.jpg" border="0" />
    <img id="tr" width="150" height="120" src="http://i.stack.imgur.com/l5OPs.jpg" border="0" />
    <img id="bl" width="150" height="120" src="http://i.stack.imgur.com/okxQz.jpg" border="0" />
    <img id="br" width="150" height="120" src="http://i.stack.imgur.com/4uPHw.jpg" border="0" />
</div>

CSS 

.work {
    padding: 5px 5px;
    border: 1px solid black;
    width: 309px;
    height: 249px;
}

.active { border: 1px solid red; }

img { position: absolute; border: 1px dashed #aaa; }

#tl { top: 16; left: 16; }
#tr { top: 16; left: 171px; }
#bl { top: 141px; left: 16; }
#br { top: 141px; left: 171px; }

JQuery код 

var work = $('.work');
var workImages = work.find('img');
var growSpeed = 1500;
var fadeSpeed = 500;

work.data('changing', false).data('queue', false);

workImages.mouseenter(function() {
    var activeImg = workImages.filter('.active');

    if (activeImg.length == 0) {
        activate(this);
    }
}).mouseleave(function() {
    var activeImg = workImages.filter('.active');

    if (activeImg.length > 0) {
        deactivate();
    }
});

function activate(cImg) {
    if (work.data('changing') !== false) {
        work.data('queue', cImg);
        return;
    }

    var activeImg = workImages.filter('.active');

    if (activeImg.length != 0) {
        return;
    }

    work.data('changing', cImg);

    activeImg = $(cImg);

    activeImg.addClass('active');

    if (!activeImg.data('origPos')) {
        activeImg.data('origPos', { left: parseInt(activeImg.css('left')), top: parseInt(activeImg.css('top')) } );
    }

    workImages.stop();

    workImages.not(activeImg).animate({ opacity: 0 }, fadeSpeed, 'linear', function() {
        activeImg.animate({
            left: 16,
            top: 16,
            width: 307,
            height: 247
        }, growSpeed, 'linear', function() {
            work.data('changing', false);

            if (work.data('queue') !== false) {
                var queued = work.data('queue');
                work.data('queue', false);

                if (queued == 'deactivate') {
                    deactivate();
                } else if (queued != cImg) {
                    deactivate(queued);
                }
            }
        });
    });
}

function deactivate(cImg) {
    if (work.data('changing') !== false && work.data('changing') !== 'deactivate') {
        work.data('queue', 'deactivate');
        return;
    }

    if (cImg) {
        work.data('queue', cImg);
    }

    var activeImg = workImages.filter('.active');

    if (activeImg.length == 0) {
        return;
    }

    work.data('changing', 'deactivate');

    var origPos = activeImg.data('origPos');

    workImages.stop();

    activeImg.animate({
        left: origPos.left,
        top: origPos.top,
        width: 150,
        height: 120
    }, growSpeed, 'linear', function() {
        workImages.not(activeImg).animate({ opacity: 100 }, fadeSpeed, 'linear', function() {
            activeImg.removeClass('active');
            work.data('changing', false);

            if (work.data('queue') !== false) {
                var queued = work.data('queue');
                work.data('queue', false);
                activate(queued);
            }
        });
    });
}
...