Question

我对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/

Answer 1

希望这能帮到你：

$(".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);


});

Answer 2

Demo

将边框宽度动画放到最后。如果将其放在开头，则边框会先消失。看看我提供的演示。如果在点击之前单击搜索外部，我还修复了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的想法为搜索框点击添加动画以使其保持一致。但问题的答案在于搜索框外点击的回调函数。

jQuery动画搜索框边框

2 个答案: