<span style="color: #006600; font-style: italic; "><br/></span>
<p style="margin: 0px 0px 10px; padding: 0px; color: #000000; font-family: 'microsoft yahei', tahoma, arial, verdana, sans-serif; font-size: 13px; line-height: 21px; white-space: normal; background-color: #f9f9f9; "><a href="http://www.php.cn/wiki/1495.html" target="_blank">jquery</a> 可以通过调用 <code style="padding: 1px 3px 2px; font-family: 'courier new', courier, monospace; color: #666666; background-color: #f1f1f1; background-position: initial initial; background-repeat: initial initial; ">animate</code> 方法添加<a href="http://www.php.cn/code/9595.html" target="_blank">动画</a>效果, 而且还提供了一套别名, 使用起来很是方便. 其中 <code style="padding: 1px 3px 2px; font-family: 'courier new', courier, monospace; color: #666666; background-color: #f1f1f1; background-position: initial initial; background-repeat: initial initial; ">slidedown</code>和 <code style="padding: 1px 3px 2px; font-family: 'courier new', courier, monospace; color: #666666; background-color: #f1f1f1; background-position: initial initial; background-repeat: initial initial; ">slideup</code> 两方法的作用是纵向展开和卷起一个页面元素, 被使用的几率很高, 却一直存在一个小问题.</p><div class="aritcle_card flexRow">
<div class="artcardd flexRow">
<a class="aritcle_card_img" href="/ai/1118" title="Mootion"><img
src="https://img.php.cn/upload/ai_manual/000/000/000/175680077137428.png" alt="Mootion" onerror="this.onerror='';this.src='/static/lhimages/moren/morentu.png'" ></a>
<div class="aritcle_card_info flexColumn">
<a href="/ai/1118" title="Mootion">Mootion</a>
<p>Mootion是一个革命性的3D动画创作平台，利用AI技术来简化和加速3D动画的制作过程。</p>
</div>
<a href="/ai/1118" title="Mootion" class="aritcle_card_btn flexRow flexcenter"><b></b><span>下载</span> </a>
</div>
</div><p style="margin: 0px 0px 10px; padding: 0px; color: #000000; font-family: 'Microsoft Yahei', Tahoma, Arial, Verdana, sans-serif; font-size: 13px; line-height: 21px; white-space: normal; background-color: #f9f9f9; ">如果目标元素是被外部<a href="http://www.php.cn/js/js-jspopular-guide-event.html" target="_blank">事件</a><a href="http://www.php.cn/php/php-tp-actuate.html" target="_blank">驱动</a>, 当鼠标快速地连续触发外部元素事件, 动画会滞后的反复执行, 相当不美观 演示页面中有一个<a href="http://www.php.cn/code/5991.html" target="_blank">按钮</a>, 请用鼠标迅速地来回划过...</p><p style="margin: 0px 0px 10px; padding: 0px; color: #000000; font-family: 'Microsoft Yahei', Tahoma, Arial, Verdana, sans-serif; font-size: 13px; line-height: 21px; white-space: normal; background-color: #f9f9f9; "><br/></p><p style="margin: 0px 0px 10px; padding: 0px; color: #000000; font-family: 'Microsoft Yahei', Tahoma, Arial, Verdana, sans-serif; font-size: 13px; line-height: 21px; white-space: normal; background-color: #f9f9f9; "><strong>如果用 jQuery 来实现这样的效果, 该如何处理呢?</strong><br/>其实很简单, 只需在触发元素上的事件设置为延迟处理, 即可避免滞后反复执行的问题. 例如: 当鼠标滑过按钮后 0.2 秒, 菜单才会展开, 如果鼠标离开按钮, 展开的处理将被终止. 也就是说, 想要展开菜单鼠标必须有 0.2 秒的事件停留在按钮上, 那么迅速地划过按钮是无法执行展开事件的. 卷起也是如此.</p><span style="color: #006600; font-style: italic; "><br/></span>// 线程 IDs var mouseover_tid = [];
var mouseout_tid = [];
jQuery(document).ready(function(){ jQuery('#menus > li').each(function(index){ jQuery(this).hover(
// 鼠标进入
function(){ var _self = this;
// 停止卷起事件
clearTimeout(mouseout_tid[index]);
// 当鼠标进入超过 0.2 秒, 展开菜单, 并记录到线程 ID 中
mouseover_tid[index] = setTimeout(function() { jQuery(_self).find('ul:eq(0)').slideDown(200); }, 400); },
// 鼠标离开 function(){ var _self = this;
// 停止展开事件
clearTimeout(mouseover_tid[index]);
// 当鼠标离开超过 0.2 秒, 卷起菜单, 并记录到线程 ID 中
mouseout_tid[index] = setTimeout(function() { jQuery(_self).find('ul:eq(0)').slideUp(200); }, 400);
}
);
});
});
