用jqueryuifold效果替换JS动画-ReplacingJSanimatebyjqueryuifoldeffect

2  

Your code is pretty close to what you need. I think the main issue is your styles and understanding how they interact with the effect.

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

The fold effect will show or hide elements based on their current state. You have the .fold class that starts your divs at 0x0 pixels and hidden, but what you really want is a rule that describes what your divs look like when displayed to your users.

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

Original:

原版的：

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

Corrected:

更正：

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

Since your .fold style is now describing the end state of your divs, it no longer has a display: none; rule. Since you want the divs to initially be hidden, you should add some Javascript to hide those initially:

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

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

Now, instead of manually animating styles, you can use the fold effect:

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

Original:

原版的：

// 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')

}

Updated:

更新：

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

Now that all of that is working, I think you'll want to play with some of the settings. The documentation for the fold effect shows that you can set the size of your element as it is folded up as well as the order of folding. To mimic the link that you posted, I would set the size to 5 since your divs have a 5px border. I would also set horizFirst to true since that is what your example shows.

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

I also decided to use toggleClass instead of addClass("active") and removeClass("active"). This resulted in simpler settings.

我还决定使用toggleClass而不是addClass（“active”）和removeClass（“active”）。这导致更简单的设置。

Here's the finished product:

这是成品：

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

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

2  

Edit:

编辑：

This took me enormous amount of time than expected, because of a weird CSS behaviour, so the problem was this rule which I removed:

这花费了大量的时间，因为奇怪的CSS行为，所以问题是我删除了这个规则：

.fold.active {
  display: inline-block;
}

And the solution is here : http://jsfiddle.net/3tf5ttrf/

解决方案在这里：http：//jsfiddle.net/3tf5ttrf/

$("a").click(function () {
  var page = $(this).data("page");
  var selected = $("#" + page);
  var active = $('.fold.active')

  if (active.length > 0) {
      if (active.first().is(selected.first())) {
          console.log('same');
          toggleEl(selected);
      } else {
          console.log('diff');
          toggleEl(active);
          toggleEl(selected);
      }
  } else {
      console.log('zero');
      toggleEl(selected);
  }
});

function toggleEl(el) {
    el.toggleClass("active");
    el.toggle("fold");
}

1  

Try this less JS more CSS

试试这个少了JS的CSS

$("li").on("click", function () {
    var dataPage = $(this).find("a").attr("data-page");
    console.log(dataPage);
    $("[id="+ dataPage + "]").addClass("active").siblings("div.fold").removeClass("active");
    $(this).addClass("active").siblings("li").removeClass("active")
});

.fold {
    width: 0px;
    height: 0px;
    overflow: hidden;
    position: absolute;
    transition: width .8s ease-in-out, height .8s .8s ease-in-out 
}
.fold.active {
    width: 500px;
    height: 500px;
    transition: height .8s ease-in-out, width .8s .8s ease-in-out
}

#fold1 {
    border: 5px solid #bada55;
    background: red
}
#fold2 {
    border: 5px solid #fed900;
    background: aqua
}
#fold3 {
    border: 5px solid #223322;
    background: green
}
#fold4 {
    border: 5px solid #55bada;
    background: purple
}
ul {
    position: absolute;
    top: 50px;
    right: 50px;
    list-style-type: none
}
li.active a{color: red}

Div menu item 1
Div menu item 2
Div menu item 3
Div menu item 4