用jquery ui fold效果替换JS动画

Question

我目前正在使用下面的代码,效果很好.但是我遇到了一些问题/限制让我觉得使用jQuery UI折叠效果代替js animate函数会更合适.

由于我对JS不是很熟悉,你可以帮我调整下面的代码来使用jQuery UI折叠效果而不是动画功能吗？非常感谢

http://jsfiddle.net/rnjea41y/

JS:

$("a").click(function () {
  var page = $(this).data("page");
  if ($('div:animated').id != page) {
    var active = $(".fold.active");

    // if there is visible fold element on page (user already clicked at least once on link)
    if (active.length) {
      active.animate({
        width: "0"
      }, 200)
      .animate({
        height: "0"
      }, 200, function () {
        // this happens after above animations are complete
        $(this).removeClass("active");
      });
      // clicking for the first time
    };
    if (active.attr("id") != page) {
      $("#" + page)
      .addClass("active")
      .animate({
        height: "500px"
      }, 1000, 'linear')
      .animate({
        width: "500px"
      }, 400, 'linear')
    }
  }
});

Answer 1

您的代码非常接近您所需要的。我认为主要问题是你的风格以及理解它们如何与效果相互作用。

折叠效果将根据元素的当前状态显示或隐藏元素。你有.fold从 0x0 像素开始并隐藏的 div 的类，但您真正想要的是一个规则来描述您的 div 在向用户显示时的外观。

原来的：

.fold {
    display: none;
    width: 0;
    height: 0;
    position: absolute;
}

更正：

.fold {
    width: 500px;
    height: 500px;
    position: absolute;
}

由于您的.fold样式现在描述了 div 的最终状态，因此它不再有display: none;规则。由于您希望最初隐藏 div，因此应该添加一些 Javascript 来最初隐藏它们：

$(".fold").hide();

现在，您可以使用折叠效果，而不是手动设置动画样式：

原来的：

// if there is visible fold element on page (user already clicked at least once on link)
if (active.length) {
    active.animate({
        width: "0"
    }, 200)
        .animate({
        height: "0"
    }, 200, function () {
        // this happens after above animations are complete
        $(this).removeClass("active");
    })

    // clicking for the first time
}
if (active.attr("id") != page) {
    $("#" + page)
        .addClass("active")
        .animate({
        height: "500px"
    }, 1000, 'linear')
        .animate({
        width: "500px"
    }, 400, 'linear')

}

更新：

if (active.length) {
    active.toggle("fold", function () {
      $(this).removeClass("active");
    });
}
// clicking for the first time
if (active.attr("id") != page) {
    $("#" + page)
      .addClass("active")
      .toggle("fold");
}

现在所有这些都可以正常工作，我想您会想要尝试一些设置。折叠效果的文档显示，您可以设置元素折叠时的大小以及折叠顺序。为了模仿您发布的链接，我将设置size为 5，因为您的 div 有 5px 边框。我也想设置horizFirst为true因为这就是你的例子所显示的。

我还决定使用toggleClass代替addClass("active")和removeClass("active")。这导致设置更简单。

这是成品：

$(".fold").hide();

var foldSettings = {
    easing: 'linear',
    duration: 1200,
    size: 5,
    horizFirst: true,
    complete: function () {
        $(this).toggleClass("active");
    }
}

$("a").click(function () {
    var page = $(this).data("page");
    if ($('div:animated').id != page) {
        var active = $(".fold.active");

        // if there is visible fold element on page (user already clicked at least once on link)
        if (active.length) {
            active.toggle("fold", foldSettings);
        }
        // clicking for the first time
        if (active.attr("id") != page) {
            $("#" + page).toggle("fold", foldSettings);
        }
    }
});

http://jsfiddle.net/z69zofxm/3/