Question

我有一个菜单按钮，用于切换页面顶部的标题栏。如何才能使div（.logo和.nav）的所有内容淡入/只在标题div完成扩展后出现？否则，您可以看到导航/徽标元素在header div扩展时重新排列。

我认为有一种方法可以延迟display: none;和.logo类的.nav，直到点击事件发生后的某个时间。

提前致谢！

Answer 1

你应该使用链接：

$(document).ready(function(){
    $('.menu').click(function () {
        $('#header a').fadeToggle("slow", function() {
          $('#header').toggleClass('tiny');
        } );
    });
});

（我已为fadein添加了超时 - 请参阅http://jsfiddle.net/f3yLg/）

Answer 2

由于你无法通过jQuery处理css转换，你可以尝试使用jQuery自己的animate()模仿相同的行为：

$(document).ready(function () {
    $('.menu').click(function () {
        if ($('#header').is(".tiny")) {
            $('#header').animate({
                width: "100%",
                height: "100px",
                padding: "30px"
            }, 500, function () {
                $('#header').removeClass("tiny").find("a").fadeIn();
            });


        } else {
            $('#header').addClass("tiny").find("a").hide();
            $('#header').animate({
                width: "50px",
                height: "50px",
                padding: "5px"
            }, 500);
        }

    });
});

WORKING DEMO

更新：淡化内在内容，使用contents()

$('#header').removeClass("tiny").contents().fadeIn();

DOCUMENTATION

Answer 3

是的，css过渡和动画很棒，但是我们想要触发js - 也许是坚持.animate();的案例

一种方式（更常规，但不是100％准确/ 浏览器可能不够辣，无法匹配这些时间）

在toggleClass命令之后，我们可以设置超时以匹配我们的CSS转换时间。

$("#somediv").toggleClass("csswithtransition");
var timer = setTimeout(function() {  $("#something").hide(); },500);
/* 500 ms being the css transition time */

另外，我们要查找一些事件，但我们需要所有前缀：

-webkitTransitionEnd
otransitionend
oTransitionEnd
msTransitionEnd
transitionend

-

$("#somediv").toggleClass("tiny").one('webkitTransitionEnd otransitionend oTransitionEnd msTransitionEnd transitionend',   
  function(e) {

      $("#something").hide();

});

尝试一下

jQuery：如果div扩展后我怎么才能淡入导航？

3 个答案: