这个jquerys 小动画怎么达不到效果？？

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script src="http://libs.baidu.com/jquery/1.10.2/jquery.min.js">
</script>
<script>
$(document).ready(function(){
    $("div").mouseenter(function(){
        $(this).stop(true,false);
        $("p").slideUp(400);
    }).mouseleave(function(){
        $(this).stop(true,false);
        $("p").slideDown(400);
    })
});
</script>
</head>
<body>
<div style="height:250px;border:blue 1px solid">
    <p style="border:red dotted 2px;height:200px">这是一个段落。</p>
</div>
</body>
</html>

为什么鼠标快速出入，动画为什么还会有延迟？？那stop(true,false)写错了吗？？求大神指点

https://jsfiddle.net/cdggm1cm/

感觉stop不能写在事件里面，链式写在mouseenter后面试试～我也是新手，说错勿怪

你就算成功STOP了动画，也只是让P框定在那个位置，而不是回到最初的位置。这里你的代码也没执行stop。

你想实现的效果用jquery实现比较麻烦，还不如直接用CSS3的trasition

$("p").stop(true,false);
为啥写成this呢

你想要的效果应该是这样

$(document).ready(function(){
    $("div").stop(true,true).mouseenter(function(){
        stop(true,true);
        $("p").slideUp(400);
    }).mouseleave(function(){
        $("p").stop(true,true).slideDown(400);
    })
});

执行动画的是<p>而不是<div>，.stop()应该加到$('p')后面，类似这样：

$("p").stop(true,false).slideUp(400);

【热门文章】