7

jQueryを使用して検索バーを拡張しようとしています。また、ナビゲーションリンクを非表示にしたい。

このようなjQueryコードがあります。このコードは、フォーカス時に正常に機能します。

$(".searchBox input").focus(function(){
    $("#navlinks").css('display','none');
   $(this).css({'width':'200px','-moz-transition':'width 0.5s ease-out','-webkit-transition':'width 0.5s ease-out','transition':'width 0.5s ease-out'});
});

 $(".searchBox input").focus(function(){
       $(this).css({'width':'100px','-moz-transition':'width 0.5s ease-out','-webkit-transition':'width 0.5s ease-out','transition':'width 0.5s ease-out'});
$("#navlinks").css('display','block');
    });

2番目の機能も正常に動作しますexcept it display the content before animation complete.

だから私は$("#navlinks").css('display','block');アニメーションが完了したときにのみ実行されたいです。

誰でも方法を教えてもらえますか?

ありがとう

4

5 に答える 5

16

.css() にはコールバック関数がありませんが、.animate() にはあります。時間を 0 に設定し、アニメーションを使用するだけです。

$(".searchBox input").on('focus',function(){
   $(this).animate({width:100,mozTransition:'width 500ms ease-out',webkitTransition:'width 500ms ease-out',transition:'width 500ms ease-out'},0,function(){
       $("#navlinks")
            .delay(500)
            .css({display:'block'});
   });
});

編集：必要な遅延が含まれています。(ありがとうeicto)

于 2013-01-28T23:09:40.770 に答える
6

アニメーションにかかる時間がわかっているのに、CSS の変更後に setTimeout() を使用しないのはなぜですか? 私が見る限り、あなたのアニメーションには約 0.5 秒かかります。同じ時間をミリ秒単位で指定して、アニメーションの最後にシームレスに「コールバック」を簡単に実行できます。

 $(".searchBox input").focus(function(){
       $(this).css({'width':'100px','-moz-transition':'width 0.5s ease-out','-webkit-transition':'width 0.5s ease-out','transition':'width 0.5s ease-out'});
       setTimeout( function() {
            $("#navlinks").css('display','block');
       }, 500);
  });
于 2013-01-28T23:14:53.003 に答える
3

.animate()次のように使用することをお勧めします

$(".searchBox input").focus(function(){
    $(this).animate({
        'width': '100px'       
    }, 500, function() {
        $("#navlinks").css('display', 'block');
    });
});

これはすべてのブラウザーで機能し、navlinks コマンドはアニメーションの完了後に開始されることが保証されます。注:500は、アニメーションが完了するまでにかかるミリ秒数であるため、それに応じて調整できます。

.animate()ドキュメント は次のとおりです。 http://api.jquery.com/animate/

于 2013-01-28T23:17:28.077 に答える
-1

ここでは transitionendイベントについて説明します。試してみましょう。

CSS:

#test {
    width: 100px;
    border: 1px solid black;
    -webkit-transition: all 1s;
    -moz-transition all 1s;
    transition all 1s;
}
#test.wide {
    width: 200px;

}

JS:

var test = $('#test');
 test.bind('transitionend webkitTransitionEnd oTransitionEnd', function () {
        $('body').append('<div>END!</div>');
    })
$('button').click(function () {
    test.toggleClass('wide');
});

デモ

于 2013-01-28T23:21:34.950 に答える