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

时间：2011-02-17 23:42:59

标签： jquery jquery-animate opacity fade

我正在尝试将图像设置为div的全宽和高度，它与左上角的图像一样，但是其他人将图像移动到左上角，然后将其设置为动画

Here's a link to my jsFiddle

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

由于

解

为了获得适用于所有浏览器的效果，我执行了此操作jsFiddle

感谢iWasRobbed帮助解决方案

2 个答案:

答案 0 :(得分：2)

绝对有可能，而不是使用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="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 :(得分：1)

是的，决定玩这个游戏，实现起来并不容易。

据我所知，到目前为止，仍然存在问题，但这是一个起点。

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

初始布局

Initial Layout

<强>衰落

Fading

<强>生长

Growing

<强>原图

Fullsize

基本上，每张图片都会附加到.mouseenter() (docs) / .mouseleave() (docs) 事件中，并且尝试激活所需的图像，或者根据需要停用它，如果某些事情已经发生，则创建一个基本队列（需要修复）。

激活就是你如何拥有它，通过几次修改，它会消除不透明度，然后增加活动图像。取消激活是相反的，将活动图像缩小回原始图像，然后淡入（通过不透明度）。

对模型的更改主要是用于执行此类动画的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);
            }
        });
    });
}
相关问题
最新问题