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');
    });

第二个功能也很好用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()like

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

我来到这里，但我使用了另一种解决方案：

$('.something').one("webkitTransitionEnd otransitionend oTransitionEnd msTransitionEnd transitionend",
    function(event) {
        // Do something when the transition ends

 });

如您所见，当过渡结束时，这正在做某事。

此处对此进行了描述：http: //blog.teamtreehouse.com/using-jquery-to-detect-when-css3-animations-and-transitions-end

问候，
拉斯

于 2018-08-09T10:32:32.043 回答
-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 回答