Question

我正在尝试将图像动画化为div的全宽和全高，正如我所期望的那样，它与左上角的图像一起工作，但其他图像则将图像移动到左上角，然后对其进行动画化

这是我的jsFiddle链接

有没有一种方法可以淡出兄弟姐妹，然后从图像的当前位置设置动画？

谢谢

解决方案

为了获得在所有浏览器中都能使用的预期效果，我这样做了jsFiddle

谢谢 to iWasRobbed for helping with the solution

Answer 1

这肯定是可能的，只是不使用fadeIn或fadeOut函数。相反，必须在绝对定位的元素上设置不透明度的动画。如果您尝试使用fadeIn或fadeOut，则它不会起任何作用。

以下是jQuery 1.5.0的jfiddle版本（为看不到损坏图像符号的Firefox用户添加了Orbling的图像）：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="https://i.stack.imgur.com/JQFbb.jpg" /></a>
    <a href="#"><img class="topRight" src="https://i.stack.imgur.com/l5OPs.jpg" /></a>
    <a href="#"><img class="bottomLeft" src="https://i.stack.imgur.com/okxQz.jpg" /></a>
    <a href="#"><img class="bottomRight" src="https://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>

Answer 2

对了，决定用这个来演一场戏，这一点都不容易实现。

这是我迄今为止所做的，仍然很糟糕，但这是一个起点。

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

初始布局

衰落

成长

全尺寸

从本质上讲，每个图像都连接到.mousenter（）^（文档）/.mouseleve（）^（docs）事件，并尝试激活所需的映像，或根据需要将其停用，如果已经发生了一些事情，则会创建一个基本队列（需要修复）。

激活就是你的方式，经过几次修改，它会淡出不透明度，然后增长活动图像。禁用是相反的，将活动图像收缩回原始图像，然后淡入（通过不透明度）。

对模型的更改主要是HTML/CSS对制作此类动画的必要性。

如果直接使用.fadeIn（）^（文档）/.fadeOut（）^（docs）例程，这些.hide（）^（文档）图像（显示：none；），这会将它们从场景中移除，并最终将未褪色的活动图像移动到上角，从而打断动画。使用不透明度和图像的绝对位置来保持它们的位置效果更好。你可以让它们褪色和隐藏，并在动画之前重置坐标，但如果你想要任何重叠，那就没用了。

理想情况下，图像上的z-index应该更改，以保持活动项在顶部，这将允许并行衰落和增长，目前它是阶段性的。

[我正在使用.data（）^（docs）例程，用于存储当前状态，而不是变量负载，更整洁。]

HTML结构

<div class="work">
    <img id="tl" width="150" height="120" src="https://i.stack.imgur.com/JQFbb.jpg" border="0" />
    <img id="tr" width="150" height="120" src="https://i.stack.imgur.com/l5OPs.jpg" border="0" />
    <img id="bl" width="150" height="120" src="https://i.stack.imgur.com/okxQz.jpg" border="0" />
    <img id="br" width="150" height="120" src="https://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);
            }
        });
    });
}

友情链接