0

我有一个关于 jQuery 动画功能的问题。我有一个搜索框，当我单击搜索图像时，它会自行展开并出现边框。

如果我在该区域外单击，边框会立即消失并且没有动画。当我在外部单击时，如何确保边框动画search-box？

$(".search").click(function () {

    $("#search-box").animate({
        borderWidth: "1px",
        width:"190px"
    },400);

    $(".suche").animate({
        "width" : "300px"
    },400)

    $(".herz").animate({
        "left":"160px"
    },400);

     $(".telefon").animate({
        "left":"160px"
    },400);

    return false;
});

$(document).on('click', function () {
    $("#search-box").animate({
        width: "26px",
        borderWidth:"0px"
    }, 400);

     $(".suche").animate({
        "width" : "150px"
    },400);

       $(".herz").animate({
        "left":"0px"
    },400);

     $(".telefon").animate({
        "left":"0px"
    },400);


});

JSFiddle：http: //jsfiddle.net/aldimeola1122/fPwB9/1/

4

2 回答 2

0

希望这对您有所帮助：

$(".search").click(function () {

    $("#search-box").animate({
        borderWidth: "1px",
        width:"190px"
    },400, function(){

        $(".suche").animate({
        "width" : "300px"
    },400)

    $(".herz").animate({
        "left":"160px"
    },400);

     $(".telefon").animate({
        "left":"160px"
    },400);

    });



    return false;
});

$(document).on('click', function () {
    $("#search-box").animate({
        width: "26px",
        borderWidth:"0px"
    }, 400);

     $(".suche").animate({
        "width" : "150px"
    },400);

       $(".herz").animate({
        "left":"0px"
    },400);

     $(".telefon").animate({
        "left":"0px"
    },400);


});
于 2013-09-01T15:39:49.670 回答
0

演示

把边框宽度动画放到最后。如果将其放在开头，则边框会先于其他任何东西消失。看看我提供的演示。我还修复了在单击搜索之前单击搜索外部时 div 宽度会发生变化的部分。

我在一个回调函数中移动了所有动画，以便在搜索框动画完成后执行，然后在最后更改没有动画的边框宽度。

$(".search").click(function () {

    $("#search-box").animate({
        borderWidth: "1px",
        width: "190px"
    }, 400, function () {

        $(".suche").animate({
            "width": "300px"
        }, 400)

        $(".herz").animate({
            "left": "160px"
        }, 400);

        $(".telefon").animate({
            "left": "160px"
        }, 400);

    });

    return false;
});

$(document).on('click', function () {

    $("#search-box").animate({
        width: "26px"
    }, 400, function () {
        $(".suche").animate({
            "width": "138px"
        }, 400);

        $(".herz").animate({
            "left": "0px"
        }, 400);

        $(".telefon").animate({
            "left": "0px"
        }, 400, function () {
            $("#search-box").css({
                "borderWidth": "0px"
            });
        });

    });
});

编辑-我采用@Farid Imranov 的想法来添加搜索框点击动画以使其保持一致。但是您的问题的答案在于在搜索框外单击时的回调函数。

于 2013-09-01T15:52:16.033 回答