如何防止SlideToggle函数排队？

发布于 2024-08-04 01:15:25 字数 1546 浏览 3 评论 0原文

案件： Jquery 代码管理一个滑动 EM 标签（带有 slipToggle 函数），使其在悬停时出现。

问题： SlideToggle 有时会对悬停状态进行排队。我参考了这篇文章： http://www.learningjquery.com/2009/ 01/quick-tip-prevent-animation-queue-buildup

我尝试插入 stop() 函数，但这不会影响 slipToggle(); 但这些方法对动画功能很有好处。

这是我正在处理的代码：

Jquery 代码：

$(document).ready(function() {
    $('#ProdImg a .priceTag').slideUp();    

    $('#ProdImg a').mouseover(function() {
        $(this).stop().find('.priceTag').slideToggle();
    });

    $('#ProdImg a').mouseout(function() {
        $(this).stop().find('.priceTag').slideToggle();
    });
});

HTML 代码：

<div id="ProdImg" style=" height:240px;">
    <a title="TEXT" href="TEXT_URL" style="position:absolute; margin-left:10px;">
    <em style="text-align:right; color:#666;" class="priceTag">
        <div class="colorGoldGradient" style="width:100%;">
            <div class="rightGoldGradient" style="width:100%;">
                <div class="leftGoldGradient" style="width:100%;">
                    <div style="padding-left:5px; padding-right:10px;">Prezzo:<br />
                    TEXT
                    </div>
                </div>
            </div>
        </div>
    </em>
    <span class="offertaTag"><span>
    </a>
</div>

原文

Case:
Jquery code manage a sliding EM tag (with slideToggle function) for its appearing on hover.

Problem:
The slideToggle sometimes queue the hover state.
I referred to this article:
http://www.learningjquery.com/2009/01/quick-tip-prevent-animation-queue-buildup

I tried to insert stop() function, but this not affect slideToggle();
But the methods it'going good for animate function.

This is the code where i working on:

Jquery Code:

$(document).ready(function() {
    $('#ProdImg a .priceTag').slideUp();    

    $('#ProdImg a').mouseover(function() {
        $(this).stop().find('.priceTag').slideToggle();
    });

    $('#ProdImg a').mouseout(function() {
        $(this).stop().find('.priceTag').slideToggle();
    });
});

HTML code:

<div id="ProdImg" style=" height:240px;">
    <a title="TEXT" href="TEXT_URL" style="position:absolute; margin-left:10px;">
    <em style="text-align:right; color:#666;" class="priceTag">
        <div class="colorGoldGradient" style="width:100%;">
            <div class="rightGoldGradient" style="width:100%;">
                <div class="leftGoldGradient" style="width:100%;">
                    <div style="padding-left:5px; padding-right:10px;">Prezzo:<br />
                    TEXT
                    </div>
                </div>
            </div>
        </div>
    </em>
    <span class="offertaTag"><span>
    </a>
</div>

分享到QQ

分享到微博

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

发布评论

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

缪败 2024-08-11 01:15:25

虽然这已经有一年了，但它总是值得回答，在您的示例中，您正在停止元素 #ProdImg a 上的动画。您希望在 .priceTag 上停止它。为此，您的代码应如下所示：

$(document).ready(function() {
    $('#ProdImg a .priceTag').slideUp();        

    $('#ProdImg a').mouseover(function(){
        $(this).find('.priceTag').stop().slideToggle();
    }).mouseout(function(){
        $(this).find('.priceTag').stop().slideToggle();
    });
});

请注意 stop() 位于查找之后。这意味着您要停止此元素上的动画，而不是没有运行动画的父元素。

Although this is a year old now, it's always worth answering, in your example you are stopping the animation on the element #ProdImg a. You want to be stopping it on .priceTag. To do this your code should like so:

$(document).ready(function() {
    $('#ProdImg a .priceTag').slideUp();        

    $('#ProdImg a').mouseover(function(){
        $(this).find('.priceTag').stop().slideToggle();
    }).mouseout(function(){
        $(this).find('.priceTag').stop().slideToggle();
    });
});

Notice the stop() comes after the find. Meaning you are stopping the animation on this element not the parent element which has no animation running.

回复收藏 0 原文

~没有更多了~