jQuery和LT; HTML＆GT;类引发的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一个被点击时，我想的类秀王添加到HTML标记。 show2如果.menu2一个点击等。
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一个'被点击，HTML类是秀王变焦3秒钟，然后就秀王。如果.menu2一个'被点击，HTML类是'show2扳手为例。
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.
我不介意在脚本中手动设置过渡（变焦，转动等）的名称，但如果它更容易/更整洁，我可以用一个类的系统上的李，像菜单1对秀王T-变焦。
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旁边的齿轮），改变从秀王到show2变焦的HTML类，你会看到预期的转变，这应该是立方体旋转到正确的一面（.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!
新建演示这里。
New demo here.
推荐答案
P.S。我认为这些转变是真棒！
P.S. I think those transitions are awesome!
编辑：
code更改以解决pre-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和LT; HTML＆GT;类引发的3D转换的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
