jQuery折叠褪色的div和扩展动画问题答案

【问题标题】：jQuery collapsing faded divs and expanding animation problemjQuery折叠褪色的div和扩展动画问题
【发布时间】：2011-06-29 11:56:09
【问题描述】：

我正在尝试将图像设置为 div 的完整宽度和高度，它与我期望的左上角图像一起使用，但其他图像将图像移动到左上角然后对其进行动画处理

Here's a link to my jsFiddle

有没有办法让兄弟姐妹淡出，然后从当前位置为图像设置动画？

谢谢

解决方案

为了获得在所有浏览器中都适用的我想要的效果，我这样做了jsFiddle

感谢 iWasRobbed 提供解决方案

【问题讨论】：

您的示例中的 img src 似乎有误。
@Dogbert 我没有链接图片 - 我只是设置了宽度和高度，这样你就可以看到我想要完成的工作
你想要完成的事情比你想象的要难。
啊。我猜你是用 Chrome 来测试的。 jsfiddle 示例在 FF 上没有任何作用。
您可以将其拆分为 4 个 div，每个 div 具有不同的对齐方式。我注意到当我在同一个 div 中有两个不同的对齐时，淡入淡出效果会中断。

标签： jquery jquery-animate opacity fade

【解决方案1】：

这绝对是可能的，只是没有fadeIn 或fadeOut 函数。相反，您必须在绝对定位的元素上设置不透明度动画。如果您尝试使用fadeIn 或fadeOut，那么它什么也不做。

这是一个带有 jQuery 1.5.0 的 jfiddle 版本（添加了 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>

【讨论】：

【解决方案2】：

对，决定玩一下这个，一点都不轻松。

这是我目前所了解的，仍然有很多问题，但这是一个起点。

演示：http://jsfiddle.net/NzcZH/

初始布局

褪色

成长

全尺寸

本质上，每个图像都与.mouseenter()^(docs) / .mouseleave()^(docs) 事件挂钩，并尝试激活所需的图像，或根据需要停用它，如果某些事情已经发生，则会创建一个原始队列（需要修复）。

Activation 就是你的方式，经过一些修改，它会淡出不透明度，然后增大活动图像。停用则相反，将活动图像缩小回原始图像，然后淡入（通过不透明度）。

模型的变化主要是 HTML/CSS 做这种动画的必要性。

如果你直接使用.fadeIn()^(docs) / .fadeOut()^(docs) 例程，这些.hide()^(docs)最后的图像(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);
            }
        });
    });
}

【讨论】：