当前位置： 文江博客话题详情

jquery 淡入淡出优先级

发布于 2024-12-21 22:24:13 字数 1856 浏览 1 评论 0原文

我最近发布了关于悬停效果的文章。

现在可以了，但我想知道是否有办法优先考虑效果。例如，如果用户快速经历一系列图像翻转，则动画需要一段时间才能跟上。我不介意动画继续，但我希望当前悬停的项目立即淡入。

这是我目前的代码：

<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.5.0/jquery.min.js" type="text/javascript"></script>
<title>Robs Test</title>
<style>
body{background:gray;}
div{position:relative;}
.box{
    position:relative;
    width:150px;
    height:150px;
    float:left;
    display:block;
    background:black;
    margin-right:20px;
}
.boxover{
    position:absolute;
    top:10px;
    left:0px;
    width:100%;
    height:20px;
    z-index:100;
    background:white;
    display:none;
}
</style>
<script type="text/javascript">
    $(function(){
        $('.box').hover(over, out);
    });


    function over(event){
        var over_id = '#box_over_' + $(this).attr('id').replace('over_','');

        $(over_id).fadeIn(400);
        $(over_id).css("display","normal");

    }
    function out(event) {
        var over_id = '#box_over_' + $(this).attr('id').replace('over_','');

        $(over_id).fadeOut(400);

    }

</script>

</head>

<body>
<a href="#" class="box" id="over_1"><img src="pier.jpg" alt="test" width="150" height="150" /><div id="box_over_1" class="boxover">hello</div></a>
<a href="#" class="box" id="over_2"><img src="pier.jpg" alt="test" width="150" height="150" /><div id="box_over_2" class="boxover">there</div></a>
<a href="#" class="box" id="over_3"><img src="pier.jpg" alt="test" width="150" height="150" /><div id="box_over_3" class="boxover">rob</div></a>


</body>

</html>

我可以做些什么来使悬停在其他div之上的div优先于其他div吗？所以我不必等到动画完成。

干杯

罗布

原文

I have recently posted about a hover effect with hover.

It now works ok, but I was wondering if there is a way to prioritise the effect. For example, if the user goes through a sequence of image rollovers quickly it takes a while for the animation to catch up. I don't mind the animations continuing, but I would like the item that is currently being hovered over to fadein immediately.

Here is my code at the moment:

<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.5.0/jquery.min.js" type="text/javascript"></script>
<title>Robs Test</title>
<style>
body{background:gray;}
div{position:relative;}
.box{
    position:relative;
    width:150px;
    height:150px;
    float:left;
    display:block;
    background:black;
    margin-right:20px;
}
.boxover{
    position:absolute;
    top:10px;
    left:0px;
    width:100%;
    height:20px;
    z-index:100;
    background:white;
    display:none;
}
</style>
<script type="text/javascript">
    $(function(){
        $('.box').hover(over, out);
    });


    function over(event){
        var over_id = '#box_over_' + $(this).attr('id').replace('over_','');

        $(over_id).fadeIn(400);
        $(over_id).css("display","normal");

    }
    function out(event) {
        var over_id = '#box_over_' + $(this).attr('id').replace('over_','');

        $(over_id).fadeOut(400);

    }

</script>

</head>

<body>
<a href="#" class="box" id="over_1"><img src="pier.jpg" alt="test" width="150" height="150" /><div id="box_over_1" class="boxover">hello</div></a>
<a href="#" class="box" id="over_2"><img src="pier.jpg" alt="test" width="150" height="150" /><div id="box_over_2" class="boxover">there</div></a>
<a href="#" class="box" id="over_3"><img src="pier.jpg" alt="test" width="150" height="150" /><div id="box_over_3" class="boxover">rob</div></a>


</body>

</html>

Is there something I can do to make the div that's being hovered over prioristise over the others? So I don't have to wait till the animation completes.

Cheers

Rob

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

扫码二维码加入Web技术交流群

发布评论

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

评论（4）

难得心□动 2024-12-28 22:24:13

您可以使用 jQuery 中的 stop 函数来使其更好。它将停止正在进行的动画。

function over(event){
    var over_id = '#box_over_' + $(this).attr('id').replace('over_','');

    $(over_id).stop(true, true).fadeIn(400);
    $(over_id).css("display","normal");

}
function out(event) {
    var over_id = '#box_over_' + $(this).attr('id').replace('over_','');

    $(over_id).stop(true, true).fadeOut(400);

}

You can use stop function in jQuery to make it better. It will stop the animation in progress.

function over(event){
    var over_id = '#box_over_' + $(this).attr('id').replace('over_','');

    $(over_id).stop(true, true).fadeIn(400);
    $(over_id).css("display","normal");

}
function out(event) {
    var over_id = '#box_over_' + $(this).attr('id').replace('over_','');

    $(over_id).stop(true, true).fadeOut(400);

}
回复 原文
兰花执着 2024-12-28 22:24:13

仅当用户将鼠标悬停在图像上达到设定的阈值时间（不是每次翻转时）时，我才会触发动画（特别是如果它们很长）。

请参阅有关实现受控悬停的相关文章。

I would only trigger the animations (especially if they are long) if the user hovers over the image for set threshold amount of time (not on every rollover).

See related post on implementing controlled hover.

回复 原文
生生漫 2024-12-28 22:24:13

与 @SliverNinja 链接到的内容相关，专门针对您的场景：

function over(event) {
    var $this = $(this);
    $this.data('hoverTimer', setTimeout(function(){
        timer = null;
        var over_id = '#box_over_' + $this.attr('id').replace('over_', '');

        $(over_id).fadeIn(400);
        $(over_id).css("display", "normal");
    }, 200));
}

function out(event) {
    var timer = $(this).data('hoverTimer');

    if (timer !== null) {
        clearTimeout(timer);   
    }
    var over_id = '#box_over_' + $(this).attr('id').replace('over_', '');

    $(over_id).fadeOut(400);
}

这是小提琴： http://jsfiddle.net/9RR93/< /a>

Related to what @SliverNinja linked to, specifically for your scenario:

function over(event) {
    var $this = $(this);
    $this.data('hoverTimer', setTimeout(function(){
        timer = null;
        var over_id = '#box_over_' + $this.attr('id').replace('over_', '');

        $(over_id).fadeIn(400);
        $(over_id).css("display", "normal");
    }, 200));
}

function out(event) {
    var timer = $(this).data('hoverTimer');

    if (timer !== null) {
        clearTimeout(timer);   
    }
    var over_id = '#box_over_' + $(this).attr('id').replace('over_', '');

    $(over_id).fadeOut(400);
}

Here's the fiddle: http://jsfiddle.net/9RR93/

回复 原文
疯狂的代价 2024-12-28 22:24:13

如果你想全力以赴，你可以使用 jquery 动画为对象构建自己的优先级队列系统。然后，每当一个新的动画开始时，您可以检查队列以查看是否存在需要停止的现有动画（如果其优先级较低），或者新的动画是否不应开始（因为已经存在更高优先级的动画）在队列中运行）。刚刚在最后 10 分钟写了这个，所以检查一下是否有错误，哈哈

Animations = {
    active : [],
    remove(anim){
        this.active.splice(this.active.indexOf(anim),1);
    },
    test(){
        this.$testObj1 = $('<div id="animTest" style="position:absolute;left:100;width:20px;height:20px;border:2px solid purple;">hi1</div>');
        this.$testObj2 = $('<div id="animTest" style="position:absolute;left:200;width:20px;height:20px;border:2px solid red;">hi2</div>');
        this.$testObj3 = $('<div id="animTest" style="position:absolute;left:300;width:20px;height:20px;border:2px solid blue;">hi3</div>');
        $('html').append(this.$testObj1).append(this.$testObj2).append(this.$testObj3);
        let testAnim1 = new Animation(
            'one',
            this.$testObj1,
            {top:100},
            1000,
            1 );
        let testAnim2 = new Animation(
            'two',
            this.$testObj2,
            {top:200},
            1000,
            2 );
        let testAnim3 = new Animation(
            'three',
            this.$testObj3,
            {top:300},
            1000,
            3 );
        setTimeout(function(){testAnim3.Animate();},1000) // lowest priority
        setTimeout(function(){testAnim2.Animate();},3000)
        setTimeout(function(){testAnim1.Animate();},2000) // highest priority
        setTimeout(function(){testAnim2.Animate();},6000)
    }
}
class Animation {
    constructor(name,$el,animationList,duration,priority,callback=null){
        this.name = name;
        this.$el = $el;
        this.animationList = animationList;
        this.priority = priority;
        this.duration = duration;
        this.callback = callback;
    }

    Animate(){
        let toRemove = [];
        console.log('animating : '+this.name);
        Animations.active.filter(x => x.priority > this.priority).forEach(x => {
            console.log('toRemPush :'+x.name);
            toRemove.push(x)
        });
        toRemove.forEach(x => {
            console.log('stopping and removing '+x.name+', priority '+x.priority+', due to '+this.name+' with priority '+this.priority);
            x.$el.stop(); 
            Animations.remove(x);
        });
        if (Animations.active.filter(x => x.priority < this.priority).length > 0){
            console.log('fail to start '+this.name+' due to higher priority anims running.');
            return;
        }
        this.$el.animate(
            this.animationList,
            this.duration,
            function(e){
                Animations.remove(this);
                if (this.callback != null && this.callback instanceof Function) {
                    this.callback(e);
                }
            });

       Animations.active.push(this);
    }
}

If you want to go whole ham, you can build your own priority queue system for objects using jquery animations. Then whenever a new animation is started, you can check the queue to see if there is an existing animation that needs to be stopped (if its priority is lower), or if the new animation should not start (due to a higher priority animation already running in the queue). Just wrote this in the last 10 mins so, check for bugs lol

Animations = {
    active : [],
    remove(anim){
        this.active.splice(this.active.indexOf(anim),1);
    },
    test(){
        this.$testObj1 = $('<div id="animTest" style="position:absolute;left:100;width:20px;height:20px;border:2px solid purple;">hi1</div>');
        this.$testObj2 = $('<div id="animTest" style="position:absolute;left:200;width:20px;height:20px;border:2px solid red;">hi2</div>');
        this.$testObj3 = $('<div id="animTest" style="position:absolute;left:300;width:20px;height:20px;border:2px solid blue;">hi3</div>');
        $('html').append(this.$testObj1).append(this.$testObj2).append(this.$testObj3);
        let testAnim1 = new Animation(
            'one',
            this.$testObj1,
            {top:100},
            1000,
            1 );
        let testAnim2 = new Animation(
            'two',
            this.$testObj2,
            {top:200},
            1000,
            2 );
        let testAnim3 = new Animation(
            'three',
            this.$testObj3,
            {top:300},
            1000,
            3 );
        setTimeout(function(){testAnim3.Animate();},1000) // lowest priority
        setTimeout(function(){testAnim2.Animate();},3000)
        setTimeout(function(){testAnim1.Animate();},2000) // highest priority
        setTimeout(function(){testAnim2.Animate();},6000)
    }
}
class Animation {
    constructor(name,$el,animationList,duration,priority,callback=null){
        this.name = name;
        this.$el = $el;
        this.animationList = animationList;
        this.priority = priority;
        this.duration = duration;
        this.callback = callback;
    }

    Animate(){
        let toRemove = [];
        console.log('animating : '+this.name);
        Animations.active.filter(x => x.priority > this.priority).forEach(x => {
            console.log('toRemPush :'+x.name);
            toRemove.push(x)
        });
        toRemove.forEach(x => {
            console.log('stopping and removing '+x.name+', priority '+x.priority+', due to '+this.name+' with priority '+this.priority);
            x.$el.stop(); 
            Animations.remove(x);
        });
        if (Animations.active.filter(x => x.priority < this.priority).length > 0){
            console.log('fail to start '+this.name+' due to higher priority anims running.');
            return;
        }
        this.$el.animate(
            this.animationList,
            this.duration,
            function(e){
                Animations.remove(this);
                if (this.callback != null && this.callback instanceof Function) {
                    this.callback(e);
                }
            });

       Animations.active.push(this);
    }
}
回复 原文
~没有更多了~

关于作者

泼猴你往哪里跑

暂无简介

文章
评论
25 人气
发私信

相关话题

更多

热门标签

操作系统 程序设计 IT运维 Linux系统管理 JavaScript 服务器应用 solaris C/C++ PHP Shell BSD Vue.js aix Oracle Python HTML 系统管理 HTML5 CSS 前端
更多

推荐作者

燃烧我的卡路李先生

文章 0 评论 0

qq_2gSKZM

文章 0 评论 0

∞梦里开花

文章 0 评论 0

qq_IklFPL

文章 0 评论 0

迷途知返

文章 0 评论 0

深海不蓝

文章 0 评论 0

更多

友情链接

文江博客
    我们使用 Cookies 和其他技术来定制您的体验包括您的登录状态等。通过阅读我们的 隐私政策 了解更多相关信息。 单击 接受 或继续使用网站，即表示您同意使用 Cookies 和您的相关数据。
    原文