Question

我正试图淡出一个div（里面有一个图像）并同时淡入一个div（里面有文字）。所以有某种过渡效应。但是当我在多个div上移动光标太快时，一些淡入，一些淡出，最后一些仍然是不可见的。

定型

.portfolio-thumbnail-detail {
    position: absolute;
    top: 0;
    left: 0;
    width: 320px;
    height: 320px;
    display: none;
}

标记

<div class="span5 portfolio-item" title="<?php echo $portfolio->ID; ?>">
    <a href="<?php echo $portfolio->guid ?>">
    <div class="portfolio-thumbnail" id="portfolio-thumbnail-<?php echo $portfolio->ID; ?>">
        <img src="image.png">
    </div>
    <div class="portfolio-thumbnail-detail" id="portfolio-thumbnail-detail-<?php echo $portfolio->ID; ?>">
        Text
    </div>
    </a>
</div>

脚本

$(document).ready(function() {  
$('.portfolio-item').hover(function() {
    var id = -1;
    var image, detail;

    id = $(this).attr('title');
    image = $('#portfolio-thumbnail-'+id);
    detail = $('#portfolio-thumbnail-detail-'+id);
    detail.css('opacity', 0);
    detail.show();

    $(image).animate({
        opacity: 0,
    }, {
        duration: 400,
        step: function(now, fx) {
            detail.css('opacity', 1-now);
        },
        complete: function() {
            image.hide();
        },
    });
}, function() {
    var id = -1;
    var image, detail;

    id = $(this).attr('title');
    image = $('#portfolio-thumbnail-'+id);
    detail = $('#portfolio-thumbnail-detail-'+id);
    image.css('opacity', 0);
    image.show();

    $(detail).animate({
        opacity: 0,
    }, {
        duration: 400,
        step: function(now, fx) {
            image.css('opacity', 1-now);
        },
        complete: function() {
            detail.hide();
        },
    });
});
});

可能的解决方案

我找到了另一个解决方案。我在hover函数的开头和“hover-out”函数的完整事件中调用 reset（）函数。

function reset（）{
  $（'。portfolio-thumbnail'）。css（'opacity'，1）;
  $（'。portfolio-thumbnail-detail'）。css（'opacity'，0）;
  }

这对我来说没问题。

Answer 1

需要使用stop()

停止提示动画

 $(image).stop().animate({
        opacity: 0,
    }, {
        duration: 400,
        step: function(now, fx) {
            detail.css('opacity', 1-now);
        },
        complete: function() {
            image.hide();
        },
    });

尝试同时为多个元素设置动画时jQuery动画混乱

1 个答案: