jquery动画

Question

<div class="outside">
    <div class="inside"></div>
</div>

* {
  margin: 0px;
  padding: 0px;
}
.outside {
  width: 200px;
  height: 200px;
  border: 1px solid black;
  margin: 0px auto;
  position: relative;
}
.outside .inside {
  width: 100%;
  height: 100%;
  background: green;
  position: absolute;
  top: 0px;
  left: 0px;
}

$(function(){
    $(".outside").mouseover(function(event) {
        $(".inside").animate({
            "height": "0px",
            "top": "100%"
        }, function(){
            $(".inside").stop(true, true);
        });
    });
    $(".outside").mouseout(function(event) {
        $(".inside").animate({
            "height": "100%",
            "top": "0px"
        }, function(){
            $(".inside").stop(true, true);
        });
    });
})

如果焦点在.outside元素上乱划，.inside元素会保持mouseover()事件中的状态。

这是为什么？

Answer 1

VGOKFLKTAPQFHPCSHQJRMWLVOGSSTCUZSFIIKUQFUDXUEGHJYUNTPCCXMXCPJFFNVDFKQQWSWIAMBOXXLEMUWYHRDHQYBJCPNAANEWUZCZZVUVAVUDQTDWEPEQPMWMTNTUJTFFCXLGLDGPFVHSQSXNUKTBUQRQTQZCALXYAGTGPNHOJYRBDDSQPAPKXDTRFHWEJVVPDXFEQGKXXYXYHWPOIEYGHACYKUESMLXSLRBXARTOGPSVVUFUCKNGWZXFTLHXKHDFPOGVYBEXVQVXVOLOHAHDOHAMJFFGLDMIIRBFTLMSEBKUJHRDIBUXXSNRRTWTWZAYGYXQJDPEYXZHEXAJNUZBAWGMMMDUPORRADOUONVIBUUZUFRGMMZYIZXJOOANNDOZVTWJJMYZBGSBEEKGEQVGGDDJTQYNVCLYISTLTMPCFYARIASLROOGRJPSFOLOGHPGIIEEANUCYAEEKUBVNEMPZFOOJRYENNATYRPBZSSFYIASXHDXTPHSKLALYLLDBTPCVORRFGWLTQWBEKGFHFCVFSJJBTYBKXNJNSBBOEENOVUCKNNIERIRCRWWZFOMEMORJMZITBDSIEURYPXMEHRXVGHZBGJSVNYZRQIYHFVSJFUMMDWMHOTVUUAXAWUGBDAQCRKEDLADMJCNBMOGNJCMEVNVEAQTTJASHSKDQQEPEFUPICYPNJIKRQXXRVKVBDGGAKRNLMFGCFQLGOGJCIFRCUWRNXAQSWIQZOYRUXLUFOUNWQPXZEWWSSSDUTVNGMPJIZLZBEXXDLWBMLKHAUSDFKCPSCVRIHFGCCPYVMZLQWMCMHRQIAATZFQRMEGMFVLRSDMHTJWWGEWOWFZIFYMUWVHAKHIZHJRBCOBWXMHWVIELFSBCRLRHNMKGLQMWISMGFEFIVCBCDONVICVSSZDSADMWZJKYTBEHNDZRSXPMSVVMMBHVFKJQMUZBZYEXDVGLNVEZCWYZRNYLREWTEZIGABOYMNFEJORTJCQIDENADXKCEFUCISSOCROGUKRBKIQSKQZMPLDQPDQDDMWEGVGNWJFNFUCAKMPJKSUMRUENKBVKWOYUUXPKIKMCFSSKBGIGJDMZCTVRZCFOBTXPIAZSXHDOWVQGTEEQOKJVEBBCCWFNVFOHLJOYTYBBXXDBZVADDZZJNCETJPPPTUCIEXAAGMDYESVFYETUJVWDJCWZQFQZSFVYURGBATMWMTNCRNNNNWEFUWOYRRNNLDVATMZZABKFYHEEKLWHKMCBYBXYKCREHNTUSDIEKDAQHRGODAZCMIFOGOERAXUSUKHKTZJCXCOTMIPFHRXINQKQARSETLHNXDHDSKCBYYREMECREXXGVGODFYGTDPQIQYOQMWQRZRDVYYUPQBGIRZGPRUSEMCFCLFGMFSFYRYCAVRJFVSBJXPSRXXJDIUHZSVYOEUBLGISYYEWTVHYRADNLMHZDMVLPWUPGOLLVRHBIRQTRENTKMZWMMSCZSHZLLUKKIJETVOYHKQYZIDZTMFOPHMFLLYXBPRJXUUADPQFKPWFPFBMRZLRUHHUODFANAATZTIBTFVISJRSXGJEKNVCUJEGGCCWGAVRXKNMOIHUGWMMSVGYTVEWJCHBADCPVLE

Answer 2

inside的高、宽为100％，所以inside完全占满了outside。应该就会出现你说的情况