Javascript 使用jquery设置div动画

先生

在我的html页面中有一个具有文本框和按钮的div。在文本框焦点事件发生时，整个div应设置为上下动画，该动画应重复，直到焦点离开文本框。我已经创建了一个JSFIDLE

代码：

html，正文
{
填充：0；
保证金：0；
}
.文本框
{
填充：5px10px 5px10px；
字体系列：“小木屋”，无衬线；
字号：中等；
宽度：200px；
}
.textbox：焦点
{
大纲：无；
}
按钮
{
左边距：-5px；
宽度：120px；
填充：5px10px 5px10px；
字体系列：“小木屋”，无衬线；
字号：中等；
背景色：#78d6b1；
颜色：白色；
大纲：无；
}
.按钮：悬停
{
背景色：#42d39b；
光标：指针；
}
#浮点数
{
/*边框：1px点#ccc*/
顶部：200px；
位置：相对位置；
/*保证金：自动*/
}
#容器
{
边框：1px点#ccc；
宽度：50%；
保证金：自动；
}












$（'#txtmail'）。焦点（函数（）{
$（'#float_div'）。动画（{'top'：'180px'}，3000，函数（）{
$（'#float_div'）。动画（{'top'：'200px'}，3000，函数（）{
$（'#float_div'）。动画（{'top'：'180px'}，3000，函数（）{
$（'float_div'）。动画（{'top'：'200px'}，3000）；
});
});
});
});
$（'#txtEmail'）.blur（函数down（）{
$（'float_div'）。动画（{'top'：'200px'}，3000）；
});

试试这个-

var flag = 1;
var $txtEmail = $('#txtEmail');
var $float_div = $('#float_div');

$txtEmail.focus(function() {
    flag = 1;
    f();
});

$txtEmail.blur(function down() {
    flag = 0
    $float_div.animate({ 'top': '200px' }, 300);
});

function f() {
    if (flag == 1) {
        $float_div.animate({ 'top': '180px' }, 300, f);
    } else if (flag == -1) {
        $float_div.animate({ 'top': '200px' }, 300, f);
    }
    flag = flag * -1;
}

请根据您的要求更改活动持续时间

尝试以下操作-

var flag = 1;
var $txtEmail = $('#txtEmail');
var $float_div = $('#float_div');

$txtEmail.focus(function() {
    flag = 1;
    f();
});

$txtEmail.blur(function down() {
    flag = 0
    $float_div.animate({ 'top': '200px' }, 300);
});

function f() {
    if (flag == 1) {
        $float_div.animate({ 'top': '180px' }, 300, f);
    } else if (flag == -1) {
        $float_div.animate({ 'top': '200px' }, 300, f);
    }
    flag = flag * -1;
}

请根据您的要求更改活动持续时间

这怎么办

$('#txtEmail').focus(function () {            
    shakeIt();              
});
$('#txtEmail').blur(function down() {
    $('#float_div').stop();
    $('#float_div').animate({ 'top': '200px' }, 3000);
});

function shakeIt(){
    $('#float_div').animate({ 'top': '180px' }, 3000, function () {
        $('#float_div').animate({ 'top': '200px' }, 3000, function(){
            shakeIt();
        });
    });  
}

您可以声明一个函数shakeIt（），它将发挥神奇的作用。然后递归地调用它。在blur（）上，调用div上的stop（），然后用animate（）将其放下。

这是怎么回事

$('#txtEmail').focus(function () {            
    shakeIt();              
});
$('#txtEmail').blur(function down() {
    $('#float_div').stop();
    $('#float_div').animate({ 'top': '200px' }, 3000);
});

function shakeIt(){
    $('#float_div').animate({ 'top': '180px' }, 3000, function () {
        $('#float_div').animate({ 'top': '200px' }, 3000, function(){
            shakeIt();
        });
    });  
}

---

您可以声明一个函数shakeIt（），它将发挥神奇的作用。然后递归地调用它。在blur（）上，调用div上的stop（），然后用animate（）将其放下。

问题是什么？而且小提琴不起作用。现在在我的页面中，在文本框焦点上，div只上下移动一次。我想重复动画，直到焦点离开屏幕textbox@GurminderSingh：先生，小提琴在用。请点击文本框OK，明白了。在你发表评论之前，你的问题并不清楚。问题是什么？而且小提琴不起作用。现在在我的页面中，在文本框焦点上，div只上下移动一次。我想重复动画，直到焦点离开屏幕textbox@GurminderSingh：先生，小提琴在用。请点击文本框OK，明白了。您的问题直到您的评论才清楚。您应该缓存jQueryselectors@Gupta.Swap：先生，您共享的小提琴与以前一样，您应该缓存jQueryselectors@Gupta.Swap：先生，您共享的小提琴与以前相同递归函数的本质递归函数的本质