JQuery <html>用于触发 3D 转换的类 [英] JQuery <html> class to trigger 3D transforms
问题描述
我正在寻找一种很好的方法来提示 css3 3d 转换，方法是使用 JQuery 向 html 标记添加类.我有一个这样的菜单:
I am looking for a nice method to cue css3 3d transforms, by adding classes to the html tag using JQuery. I have a menu like this:
<ul>
<li class="menu1"><a href="#">Item 1</a></li>
<li class="menu2"><a href="#">Item 2</a></li>
<li class="menu3"><a href="#">Item 3</a></li>
<li class="menu4"><a href="#">Item 4</a></li>
<li class="menu5"><a href="#">Item 5</a></li>
<li class="menu6"><a href="#">Item 6</a></li>
</ul>
例如，如果单击.menu1 a"，我想将类show1"添加到 html 标记中.'show2' 如果 '.menu2 a' 被点击等
For example if '.menu1 a' is clicked, I'd like to add the class 'show1' to the html tag. 'show2' if '.menu2 a' is clicked etc.
然而，为了让我的转换正常工作，我还需要添加另一个类，然后在 3 秒等设定时间后删除.因此，如果单击.menu1 a"，则 html 类将是 3 秒的show1 zoom"，然后是show1".如果单击.menu2 a"，则 html 类将是show2 twirl".
However for my transitions to work correctly I also need another class to be added, then removed after a set time like 3 seconds. So if '.menu1 a' is clicked, the html class would be 'show1 zoom' for 3 seconds, then just 'show1'. And if '.menu2 a' is clicked, the html class would be 'show2 twirl' for example.
我不介意在脚本中手动设置过渡的名称(缩放、旋转等)，但如果它更容易/更整洁，我可以在 li 上使用一个类系统，例如'menu1 p-show1t-zoom'.
I don't mind setting the name of the transition (zoom, twirl, etc.) manually in the script, but if it's easier/neater I could use a system of classes on the li, like 'menu1 p-show1 t-zoom'.
我有一个半工作示例这里.如果您检查 html 标记(单击 html 旁边的齿轮)并将 html 类从show1"更改为show2 zoom"，您将看到所需的转换，这应该是立方体旋转到正确的一侧 (.show2) 和一个顶部的花式过渡(.zoom).除了我根本无法工作的 .js 之外，一切正常！
I have a half-working example here. If you inspect the html tag (click gear beside html) and change the html class from 'show1' to 'show2 zoom' you will see the desired transition, which should be the cube rotating to the correct side (.show2) and also a fancy transition (.zoom) on top. Everything is working correctly except the .js which I can't get working at all!
新演示 此处.
推荐答案
附言我认为这些过渡很棒！
P.S. I think those transitions are awesome!
代码更改以修复前 3 秒点击转换错误:
Code changes to fix the pre-3second click transition bug:
var currentShow, currentTransition, currentTimeout;
$('.menu ul li a').click(function() {
var $this = $(this);
var $li = $this.closest('li');
var index = $li.attr('class').replace(/menu/, '');
var $html = $li.closest('html');
$html.removeClass(currentShow);
if (currentTransition) {
$html.removeClass(currentTransition);
clearTimeout(currentTimeout);
setTimeout(function () {
DoTransition(index, $html);
},50);
} else {
DoTransition(index, $html);
}
});
function DoTransition(index, $html) {
currentShow = 'show'.concat(index);
currentTransition = GetTransitionString(index);
$html.addClass(currentShow + ' ' + currentTransition);
currentTimeout = setTimeout(function() {
$html.removeClass(currentTransition);
currentTransition = null;
}, 3000);
}
function GetTransitionString(index) {
var transition;
switch (parseInt(index)) {
case 1:
transition = 'zoom';
break;
case 2:
transition = 'zoom';
break;
case 3:
transition = 'zoom';
break;
case 4:
transition = 'zoom';
break;
case 5:
transition = 'zoom';
break;
case 6:
transition = 'zoom';
break;
}
return transition;
}
这篇关于JQuery <html>用于触发 3D 转换的类的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
