jquery Slidedown制作队列

发布于 2024-12-18 06:35:30 字数 708 浏览 2 评论 0原文

当用户将鼠标悬停在某些内容上时，我会向下滑动，并在鼠标移出时向上滑动。我的问题是，当我频繁移动鼠标直到向上滑动或向下滑动时，它不会显示。意味着它正在创建一个队列。

$(function(){
    $('div[tooltip="true"]').hover(
        function(e){
            x = e.clientX;
            y = e.clientY;
            newX = x + 10;
            newY = y + 5;
            $('#tool_tip_text_content').css({'left':newX, 'top':newY});
            html_content = '<p>Some Html content</p>';
            $('div#tool_tip_text_content').html(html_content);
            $('#tool_tip_text_content').slideDown(500);
        },
        function(e){
            $('div#tool_tip_text_content').html('');
            $('#tool_tip_text_content').slideUp(0);
        }
    );
});

原文

I am sliding down some content when a user mouse over on it and sliding up on mouse out. My problem is when I move mouse frequently until it's slideup or slidedown it doesn't show. Means it's creating a queue.

$(function(){
    $('div[tooltip="true"]').hover(
        function(e){
            x = e.clientX;
            y = e.clientY;
            newX = x + 10;
            newY = y + 5;
            $('#tool_tip_text_content').css({'left':newX, 'top':newY});
            html_content = '<p>Some Html content</p>';
            $('div#tool_tip_text_content').html(html_content);
            $('#tool_tip_text_content').slideDown(500);
        },
        function(e){
            $('div#tool_tip_text_content').html('');
            $('#tool_tip_text_content').slideUp(0);
        }
    );
});

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

凉城凉梦凉人心 2024-12-25 06:35:30

您应该使用 jQuery.stop 来停止当前正在运行的队列。您的代码应如下所示：

$(function(){
    $('div[tooltip="true"]').hover(
        function(e){
            x = e.clientX;
            y = e.clientY;
            newX = x + 10;
            newY = y + 5;
            $('#tool_tip_text_content').css({'left':newX, 'top':newY});
            html_content = '<p>Some Html content</p>';
            $('div#tool_tip_text_content').html(html_content);
            $('#tool_tip_text_content').stop(true, true).slideDown(500);
        },
        function(e){
            $('div#tool_tip_text_content').html('');
            $('#tool_tip_text_content').stop(true,true).slideUp(0);
        }
    );
});

You should make use of jQuery.stop to stop the current queue in action. Your code should look like:

$(function(){
    $('div[tooltip="true"]').hover(
        function(e){
            x = e.clientX;
            y = e.clientY;
            newX = x + 10;
            newY = y + 5;
            $('#tool_tip_text_content').css({'left':newX, 'top':newY});
            html_content = '<p>Some Html content</p>';
            $('div#tool_tip_text_content').html(html_content);
            $('#tool_tip_text_content').stop(true, true).slideDown(500);
        },
        function(e){
            $('div#tool_tip_text_content').html('');
            $('#tool_tip_text_content').stop(true,true).slideUp(0);
        }
    );
});

回复收藏 0 原文

~没有更多了~