Question

我在div上执行mouseenter时执行以下代码：

$('.expandable').mouseenter(function () {
    $(this).find('.links').css('visibility', 'hidden');

    $(this).find('.links').show('fast', function () {
        $(this).find('.links').css('visibility', 'visible');
        alert("The paragraph is now visible");
    });
}

通常情况下$(this).find('.links').eq(0).css('background-color', 'visible');应该在动画完成后执行，但我在查看开发工具（chrome）时会执行mouseenter和mouseout，但是css不会改变...但是我在收到警报时动画完成了。

有人可以帮我这个吗？

编辑，解决方案：

$('.expandable').mouseenter(function () {
    $(this).find('.links').css('visibility', 'hidden');

    $(this).find('.links').show('fast', function () {
        $(this).css('visibility', 'visible');
        alert("The paragraph is now visible");
    });
}

Answer 1

我的代码中没有$(this).find('.links').eq(0).css('background-color', 'visible');。 Anways你可以在回调中使用this，它将指向要动画的元素。试试这个。

$('.expandable').mouseenter(function () {
    $(".divname").css('visibility', 'hidden');

    $(".divname").fadeIn('fast', function () {
        $(this).css('visibility', 'visible');
        alert("The paragraph is now visible");
    });
}

Answer 2

.show()切换display和opacity，但不切换visbility。

将opacity设置为0将具有与设置visbility到hidden相同的视觉效果。所以我建议你这样：

$(".divname").css('opacity', '0');
// In case you have no code in between those two jQuery calls, you should use chaining
$(".divname").show('fast', function () {
    $(".divname").css('visibility', 'visible');
    alert("The paragraph is now hidden");
});

Answer 3

您应该使用die css属性显示。或者是funktion .hide（）

方法1：

$(".divname").css('display', 'none');

$(".divname").show('fast', function () {
    $(".divname").hide("fast");
    alert("The paragraph is now hidden");
});

方法2：

$(".divname").hide("fast");

$(".divname").show('fast', function () {
    $(".divname").hide("fast");
    alert("The paragraph is now hidden");
});

Answer 4

jquery.show不处理可见性，它处理display属性。通常，您不希望混合显示和可见性。无论如何，你要找的是opacity = 0（与visibility = hidden具有相同的效果）。

我认为你可能想要做的是跟随;

$('.expandable').mouseenter(function () {
    $(".divname").
                  css('opacity', 0).
                  animate(
                      {opacity:1},
                      1000,
                      "linear",
                      function(){
                          alert("the paragraph is now visible");
                      }
                  );
});

希望我能帮助

jquery在动画之后做一些事情

4 个答案: