Javascript jQuery css 回调函数

jQuery css call back function

提问by Giri

I'm trying to expand my searchbar using jQuery. Also I want to hide the nav links.

我正在尝试使用 jQuery 扩展我的搜索栏。我也想隐藏导航链接。

I have some jQuery code like this. This code works fine when focus.

我有一些像这样的 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');
    });

The second function also works fine except it display the content before animation complete.

第二个功能也很好用 except it display the content before animation complete.

So I want $("#navlinks").css('display','block');to be exectuted only when animate complete.

所以我只想$("#navlinks").css('display','block');在动画完成时被执行。

Can anyone tell me how?

谁能告诉我怎么做？

Thanks

谢谢

回答by PlantTheIdea

.css() doesn't have a callback function, but .animate() does. Just set the time to 0 and use animate.

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

Edit: included delay, which is required. (Thanks eicto)

编辑：包括延迟，这是必需的。（感谢 eicto）

回答by freedev

Since you know how long takes your animations, why do not use setTimeout() after CSS change? As far as I see your animation takes about 0.5 seconds. You could easily execute your "callback" seamlessly at end of your animation specifying the same amount of time in milliseconds.

既然你知道你的动画需要多长时间，为什么不在 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);
  });

回答by Ben

I would recommend using .animate()like

我建议使用.animate()像

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

This will work on all browsers, and the navlinks command will be insured to begin after the animation is complete. Note: the 500is the number of milliseconds the animation will take to complete, so you can adjust accordingly.

这将适用于所有浏览器，并且 navlinks 命令将确保在动画完成后开始。注意：500是动画完成所需的毫秒数，因此您可以相应地进行调整。

Here is the .animate()documentation: http://api.jquery.com/animate/

这是.animate()文档：http: //api.jquery.com/animate/

回答by Lars Jendrzejewski

I came along here, but I used another solution:

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

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

 });

As you see, this is doing something, when the transition has ended.

如您所见，当过渡结束时，这是在做一些事情。

This is described here: http://blog.teamtreehouse.com/using-jquery-to-detect-when-css3-animations-and-transitions-end

这在这里描述：http: //blog.teamtreehouse.com/using-jquery-to-detect-when-css3-animations-and-transitions-end

Greetings,
Lars

你好，
拉斯

回答by zb'

Hereis described transitionendevent, let's try that:

这是描述的 transitionend事件，让我们尝试一下：

CSS:

CSS：

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

}

JS:

JS：

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

DEMO

演示