jQuery CSS回调函数

Question

我想使用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');
    });

第二个函数也很好用，唯一的问题是它会在动画完成之前显示内容。因此我希望只有在动画完成后才执行$("#navlinks").css('display','block')。有人能告诉我该怎么做吗？谢谢。

- PrivateUser

Answer 1

.css() 函数没有回调函数，但是 .animate() 有。只需将时间设置为0并使用 animate。

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

- PlantTheIdea

---

完全错误。jQuery 不会等待（甚至不知道）CSS 动画。 - SLaks

不使用过渡，而是使用动画。 - zb'

@eicto：这会更慢，特别是在移动设备上。 - SLaks

使用delay()函数代替CSS动画中的时间。 - zb'

Answer 2

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

- freedev

Answer 3

我建议使用像.animate()这样的方法。

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

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

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

- Ben

Answer 4

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

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

问候，
Lars

- Lars Jendrzejewski

Answer 5

这里描述了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');
});

演示

- zb'

---

我在我的iPad上尝试了你的示例，但完全没有起作用... :( - freedev

过渡效果可以实现。但是动画结束后没有显示 div 元素。可能需要尝试指定一个不同的元素，而不是“body”。 - freedev

你可以尝试一下，就像我说的那样，这在我的设备上是可行的，而我没有iPad来进行测试。 - zb'

不行。我已经尝试修改你的示例(http://jsfiddle.net/nUVU8/4/)，但它仍无法捕捉到transitionend事件。我会再次检查你提供的链接。 - freedev

我按照这里所描述的方式添加了oTransitionEnd和webkitTransitionEnd。 - zb'