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

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

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

谢谢

解决方案

为了获得在所有浏览器中都能运行的理想效果，我做了以下操作

---

多亏了Iwasrobed对解决方案的帮助

对了，我决定玩一玩，这一点都不容易实现

这是我到目前为止所做的，仍然有很多问题，但这是一个起点

演示：

初始布局

衰落

成长

全尺寸

<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>

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);
            }
        });
    });
}

---

基本上，每个映像都连接到

.mouseenter（）

/

.mouseleave（）

事件，并尝试激活所需映像，或根据需要将其停用。如果已经发生了某些事情，则会创建一个基本队列（需要修复）

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

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

如果使用直接

.fadeIn（）

/

.fadeOut（）

例程，这些

.hide（）

将图像

（display:none；）

放在最后，这会将图像从场景中移除，并最终将未褪色的活动图像移动到上角，从而中断动画。而使用不透明度和图像的绝对定位来保持它们的位置效果更好。您可以让它们淡入淡出和隐藏，并在动画之前重置坐标，但如果您想要任何重叠，这是不好的

理想情况下，应更改图像上的

z-index

，以保持活动项在顶部，这将允许平行衰减和增长，目前正在进行阶段性调整

[我使用

.data（）

例程来存储当前状态，而不是一堆变量，更简洁。]

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>

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);
            }
        });
    });
}

jQuery代码

<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>

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);
            }
        });
    });
}

---

这当然是可能的，只是不能使用

fadeIn

或

fadeOut

功能。相反，必须在绝对定位的元素上设置不透明度动画。如果您尝试使用

fadeIn

或

fadeOut

，则它不起任何作用

以下是jQuery 1.5.0的JFIDLE版本（为看不到损坏图像符号的Firefox用户添加了Orbling的图像）：

/*定位*/
img.topLeft{位置：绝对；顶部：0；左侧：0；}
img.topRight{位置：绝对；顶部：0；右侧：0；}
img.bottomLeft{位置：绝对；底部：0；左侧：0；}
img.bottomRight{位置：绝对；底部：0；右侧：0；}
/*元件尺寸*/
div.work{背景色：#ddd；高度：240px；位置：相对；宽度：300px；}
img{宽度：150px；高度：120px；边框：无；}
$（文档）.ready（函数（）{
//防止点击跳转
$（'a'）。单击（函数（）{
返回false；
});
//工作
$（'img'）。悬停(
函数（）{
console.log（“mouseEnter”）；
var$that=$（this）；
$（this）.parent（）.sides（'a'）.animate（{opacity:0}，function（）{
$that.animate({
宽度：“300px”，
高度：“240像素”
});
});
},
函数（）{
控制台日志（“mouseLeave”）；
var$that=$（this）；
$（此）。设置动画({
宽度：“150px”，
高度：“120px”
}，1500，函数（）{
$that.parent（）.sides（'a'）.animate（{opacity:1}）；
});
});
});

您的示例中的img src似乎是错误的。@Dogbert我没有链接图像-我只是添加了宽度和高度，以便您可以看到我试图实现的目标。您试图实现的目标比您想象的要困难。啊。我猜你是用Chrome来测试的。JSFIDLE示例在FF上没有做任何事情。您可以将其拆分为4个div，每个div具有不同的align。我注意到，当我在同一个div中有两个不同的对齐时，淡入效果会中断。