jquery的边框突出循环 [英] border highlighting loop with jquery

问题描述

我遇到了麻烦，提出一个循环，将图像的边框颜色从黑色变为黄色，黄色变为黑色超过x秒。然后在图像被点击时对循环应用中断。我不知道从哪里开始，有人能指点我的方向吗？我想我可能使用错误的工具来正确地写这个。

这里是我到目前为止，虽然如果有一个更好的方式来写这个，分享！

  for（i = 100; i> = 0; i--）
 {
 $（＃imgid）。css（border-color，'rgb（'+ i +'％，'+ i +'％，0）'）; 
} 
  

我想知道三个部分。

1.）我无法画出如何结合两个循环，这样我也可以向上计数，以便它会变成黄色，回到黑色，而不停止。

2.缓慢循环，以便能够控制边界渐变效果的秒数。

2.）如何使用onclick（）事件打破循环。

解决方案

一个好的开始的地方是使用模块模式。这里是一个工作基地，它会做第一个动画：

http://jsfiddle.net/Ue4wy/1/

我会尝试添加点击中断，因为这可能很棘手

到这里：点击工作和一切

http://jsfiddle.net/Ue4wy/4/ p>

[/ Edit]

代码：

  var anim =（function（）{
 var i = 0; 
 var step = 10; 
 var up = true; 
 var timer = null; 
 
 var next = function（）{
 if（up）{
i + = step; 
} 
 else {
i  - =步骤; 
} 
 if（i <0）{i = 0; up = true;} 
 if（i> 255）{i = 255; up = $ b update（）; 
}; 
 
 var update = function（）{
 $（div）。css（border-color，'rgb + i +'，'+ i +'，'+ 0 +'）'）; 
}; 
 
 var go = function（）{
 next（）; 
 timer = window.setTimeout（anim.go，30）; 
}; 
 
 var stop = function（）{
 if（timer）{
 window.clearTimeout（timer）; 
 timer = null; 
} 
}; 
 
 var addClickHandler = function（）{
 $（div）click（function（）{
 if（timer）{
 anim.stop ; 
} 
 else {
 anim.go（）; 
} 
}）; 
}; 
 
 return {
 go：go，
 stop：stop，
 addClickHandler：addClickHandler 
}; 
}（））; 
 
 anim.addClickHandler（）; 
 anim.go（）; 
  

I'm having trouble coming up with a loop that changes the border color of an image from black to yellow and yellow to black over x seconds. Then applying an interrupt to the loop when the image gets clicked on. I don't know where to start, can someone point me in the right direction? I think I may be using the wrong tools to properly write this.

Here's what I've come up so far, though if there's a better way to write this, do share!

for( i = 100; i >= 0; i--)
{
$("#imgid").css("border-color", 'rgb(' + i + '%,' + i + '%,0)');
}

There's three parts I'd like to know.

1.)I'm having trouble picturing how I could combine two loops so that I can also count upwards as well so that it will turn into yellow and back to black without stopping. Or can I accomplish this with one loop?

2.)Slow the loop to be able to control the amount of seconds for the border fading effect.

2.)How to break the loop with an onclick() event.

解决方案

A good place to start would be using the module pattern. Here is a base to work from, it will do the first animation:

http://jsfiddle.net/Ue4wy/1/

I'll try add the click interrupt, as that can be tricky with scope.

[Edit]

Here you go: click working and everything

http://jsfiddle.net/Ue4wy/4/

[/Edit]

Code:

var anim = (function() {
    var i = 0;
    var step = 10;
    var up = true;
    var timer = null;

    var next = function() {
        if (up) {
            i += step;
        }
        else {
            i -= step;
        }
        if(i<0){i=0; up=true;}
        if(i>255){i=255; up=false;}
        update();
    };

    var update = function() {
        $("div").css("border-color", 'rgb(' + i + ',' + i + ',' + 0 + ')');
    };

    var go = function() {
        next();
        timer = window.setTimeout(anim.go, 30);
    };

    var stop = function() {
        if (timer) {
            window.clearTimeout(timer);
            timer = null;
        }
    };

    var addClickHandler = function() {
        $("div").click(function() {
            if(timer){
                anim.stop();
            }
            else{
                anim.go();
            }
        });
    };

    return {
        go: go,
        stop: stop,
        addClickHandler: addClickHandler 
    };
}());

anim.addClickHandler();
anim.go();

这篇关于jquery的边框突出循环的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！