<!DOCTYPE?html>
????<html>
???? <head>
???? ????<meta?charset="utf-8"?/>
???? ????<script?src="https://libs.baidu.com/jquery/1.9.1/jquery.js"></script>
???? </head>
???? <body>
???? ????<div?id="one"?style="border:1px?solid?red;width:?250px;height:?250px;">
???? ???? 把鼠標移進來,移出去
???? ???? <div?id="two"?style="width:?100px;height:?100px;background:?green;"></div>
???? ????</div>
???? ????<script>
???? ????????$('#one').hover(function()?{
???? ????????????$('#two').slideUp(1000).slideDown(1000);
???? ????????????//換成以下就不行
???? ????????????//$('#two').fadeIn(1000).fadeOut(1000);
???? ??????????????},?function()?{
???? ???????????? $('#two').fadeOut(1000).fadeIn(1000)
???? ?????????});
???? ?????????$("<button>停</button>").appendTo("body").click(function()?{
???? ?????????????$('#two').stop(true,?false);
???? ??????????}); </script>
???? ?</body>
????</html>
$('#two').slideUp(1000).slideDown(1000);
?換成以下就不行,就沒效果
?$('#two').fadeIn(1000).slideDown(1000);
?或? ?$('#two').fadeIn(1000).fadeOut(1000);
2018-06-26
fadeIn是讓隱藏的東西能看得見,fadeOut是讓看得見的東西看不見,這個你應該知道
然后你這個在沒有執(zhí)行動畫之前是這樣的
? ? $('#two').fadeIn(1000).fadeOut(1000);? ?$('#two').fadeOut(1000).fadeIn(1000)
? ? ?如果你這樣寫,鼠標移進去,執(zhí)行$('#two').fadeIn(1000).fadeOut(1000); 但你的綠框部分是可見的,沒有設(shè)置隱藏,fadeIn(1000)直接死掉,執(zhí)行fadeOut(1000),你會發(fā)現(xiàn)它只隱藏了,因為你寫反了
? ? ?然后,當你鼠標移出去的時候,它又是出于隱藏狀態(tài)的,所以fadeOut(1000)又死掉了,只執(zhí)行fadeIn(1000),所以只顯示了出來
2018-06-26
測試了一下,是因為你寫反掉了
把$('#two').fadeIn(1000).fadeOut(1000);換成$('#two').fadeOut(1000).fadeIn(1000);就行了
寫反了會導致順序沖突