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 に答える