Question

当用户滚动某个<td>时，嵌套在<div>中的iframe会在<div>内滑动。现在我有三个<div>堆叠在一起，并使用jQuery我显示并隐藏适当的<div>。

如果我让每个<div>出现然后将我的光标移动到下一个<td>，它可以正常工作，但是如果我快速移动到每个链接，它们会加载到一起并且jQuery无法正确隐藏其他<div>的。

这是项目网站：

点击“MPC客户”下拉列表，然后将三个链接悬停：

这是我正在使用的jQuery：

$("td#version1").hover(function() {
    $("#iframe2,#iframe3").hide();
    $("#iframe1").slideDown("slow");
    $("#iframe2,#iframe3").hide();
});

$("td#version2").hover(function() {
    $("#iframe1,#iframe3").hide();
    $("#iframe2").slideDown("slow");
    $("#iframe1,#iframe3").hide();
});

$("td#version3").hover(function() {
    $("#iframe1,#iframe2").hide();
    $("#iframe3").slideDown("slow");    
    $("#iframe1,#iframe2").hide();
});

这是隐藏<div>的html：

<tr>
    <td id="previewWindow0" class="previewWindow" colspan="3"><h2>Preview Window</h2>
        <div id="iframe1"><iframe src="http://www.crm-newsletter.com/client-emails/liveWebinar.html"></iframe></div>
        <div id="iframe2"><iframe src="http://www.crm-newsletter.com/client-emails/MissedWebinar.html"></iframe></div>
        <div id="iframe3"><iframe src="http://www.crm-newsletter.com/client-emails/Mobile.html"></iframe></div>
    </td>
</tr>

Answer 1

当您快速移动元素时，会触发多个事件并且动画未完成，因此您看不到预期的行为。

使用stop()方法在开始下一个动画之前停止上一个动画。

试试这个。

    $("td#version1").hover(function() {
        $("#iframe2,#iframe3").hide();
        $("#iframe1").stop(true, true).slideDown("slow");
        $("#iframe2,#iframe3").hide();
    });
    $("td#version2").hover(function() {
        $("#iframe1,#iframe3").hide();
        $("#iframe2").stop(true, true).slideDown("slow");
        $("#iframe1,#iframe3").hide();
    });
    $("td#version3").hover(function() {
        $("#iframe1,#iframe2").hide();
        $("#iframe3").stop(true, true).slideDown("slow");    
        $("#iframe1,#iframe2").hide();
    });

stop(clearQueue, jumpToEnd)参考 - http://api.jquery.com/stop/

使用jQuery显示和隐藏多个div

1 个答案: