jQuery的動畫

Question

我有以下上一個div做MouseEnter在代碼執行後做一些事情）當做mouseenter和mouseout時，但css不會改變......但是當動畫完成時，我得到了警報。

有人可以幫助我嗎？

編輯，SOLUTION：

$('.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');在你的代碼。您可以在回調中使用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好好嘗試處理的可視性，它所處理的顯示特性。一般來說，你不想混合顯示和可視性。總之，你要找的是opacity = 0（與visibility = hidden具有相同的效果）。

我想你可能想要做的是跟隨;

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

希望我幫