3

嗨，我的一个问题transition在按下按钮时被调用。我感到困惑的原因是因为它以前有效，但后来我把它移到了另一个地方div，现在它不是？当我的意思是它不工作时，我的意思是该函数工作（因为它确实做某事）然后运行回调，但是当它切换类时它不会“动画”它。div只是停留在那里直到动画时间结束，然后运行隐藏它的回调。

所以基本上它只是隐藏它，但没有动画它应该做的滑出效果。

switchClass即使是使页面滑回的功能，其余功能也可以正常工作。

无法正常运行的代码：

function hidepage() {
        $( ".PageShow" ).switchClass("PageShow", "PageHide", loadpanel);
// Alternative $( "PageContainer" ).switchClass("PageShow", "PageHide", loadpanel);
    };

以及随之而来的其余代码......

CSS：

#PageContainer {
   margin-top:120px;
   width:100%;
}

.PageShow {
   position:fixed;
   -webkit-transform:translate(0px,0px);
   -moz-transform:translate(0px,0px);
   -ms-transform:translate(0px,0px);
   -o-transform:translate(0px,0px);
   transform:translate(0px,0px);
   transition-duration: 0.3s;
   -moz-transition-duration: 0.3s;
   -webkit-transition-duration: 0.3s;
   transition-delay: 0.1s;
   -moz-transition-delay: 0.1s;
   -webkit-transition-delay: 0.1s;
   -o-transition-delay: 0.1s;
   transition-timing-function: ease-out;
   -moz-transition-timing-function: ease-out;
   -webkit-transition-timing-function: ease-out;
   -o-transition-timing-function: ease-out;
}

.PageHide {
   position:fixed;
   -webkit-transform:translate(-100%,0px);
   -moz-transform:translate(-100%,0px);
   -ms-transform:translate(-100%,0px);
   -o-transform:translate(-100%,0px);
   transform:translate(-100%,0px);
   transition-duration: 0.5s;
   -moz-transition-duration: 0.5s;
   -webkit-transition-duration: 0.5s;
   transition-timing-function: ease-out;
   -moz-transition-timing-function: ease-out;
   -webkit-transition-timing-function: ease-out;
   -o-transition-timing-function: ease-out;
}
4

2 回答 2

2

如果您将方法更改.switchClass()为.removeClass()，.addClass()它将起作用。看看这个jsFiddle。有两个函数，第一个被调用.hidepage()，第一个函数使用.removeClassand .addClass，第二个函数.hidepagetwo()使用.switchClass()

真正的错误是：最后有一个});缺失，至少在 jsFiddle 中你的代码在添加后可以工作。

于 2012-12-25T13:16:17.490 回答
1

看起来您使用 switchClass 不正确。这是 API 文档：

http://api.jqueryui.com/switchClass/

请注意，该方法需要 2 个强制参数和 3 个可选参数。您不能将加载面板（如果那是您的回调函数）填充到第三个参数中，因为它属于第五个。在这种情况下，您需要指定第 3 和第 4 的值，以便您的回调函数最终到达预期的位置。

另外，你有很多 CSS 过渡的东西，但我的理解是 switchClass 在你的两个类之间做一个 javascript 动画。查看上面链接中的示例。您只需要在一个类中指定前样式，在另一个类中指定后样式。switchClass 将插入中间并在没有所有 CSS 转换的情况下执行动画。

由于您在类上都有所有这些 CSS 动画，另一种方法是尝试 jQuery 的 toggleClass，它只是打开/关闭类：http ://api.jquery.com/toggleClass/

于 2012-12-25T13:12:06.473 回答