jquery动画函数-click一个div切换另一个
jquery动画函数-click一个div切换另一个
提问于 2017-05-14 02:32:22
让这个jquery函数每次单击时都会给我第二个函数。我怎么才能阻止这一切？
我有一个导航栏，它有3个链接，每个链接都有一个id不同的.contentDiv。每当有人点击其中一个链接时，切换函数就会发生；隐藏所有的.contentDiv都希望链接到该链接。一个向左滑动的动画出现在那个.contentDiv上
HTML：
.navbar
ul
li
a.about(href='#') About
span
span
li
a#portfolio(href='#') HOME
span
span
li
a(href='#') Contact
span
span
.contentDiv#portfolioContent
.title About
.content
.fse
p Lorem ipsum dolor sit amet, consectetur adipiscing elit. CSS：
.contentDiv {
transform: skew(45deg);
width: 100%;
height: 100%;
position: relative;
top: 5%;
left: 300%;
overflow: hidden;
}
.title {
position: absolute;
top: 30%;
left: 30%;
font-size: 500%;
font-family: Raleway;
font-weight: 800;
color: #EAEBED;
}
.content {
width: 100%;
height: 50%;
top: 43%;
left: 3%;
font-size: 130%;
font-family: Raleway;
color: #EAEBED;
position: absolute;
overflow:scroll;
padding-bottom: 7%;
}Jquery：
$('.about').click(function () {
$("#aboutContent").toggle(
function() {
$("#aboutContent").animate({left: "115%"}, { //coming out of hiding
duration: 2000
});
}, function() {
$("#aboutContent").animate({left: "300%"}, { //back into hiding
duration: 2000
});
}
);
});回答 3
Stack Overflow用户
回答已采纳
发布于 2017-05-14 03:10:55
您可以创建一个clickToggle函数，并使用它在单击时在函数之间切换：
(function($) {
$.fn.clickToggle = function(func1, func2) {
var funcs = [func1, func2];
this.data('toggleclicked', 0);
this.click(function() {
var data = $(this).data();
var tc = data.toggleclicked;
$.proxy(funcs[tc], this)();
data.toggleclicked = (tc + 1) % 2;
});
return this;
};
}(jQuery));
$('.about').clickToggle(function() {
alert("First handler for .toggle() called.");
$("#aboutContent").toggle("Slow");
}, function() {
alert("Second handler for .toggle() called.");
$("#aboutContent").toggle("Slow");
});#aboutContent {
height: 200px;
width: 200px;
background: red;
}<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button class="about">
CLICK
</button>
<div id="aboutContent">
123123123
</div>
Stack Overflow用户
发布于 2017-05-14 03:02:56
var c = 1;
$('.about').click(function() {
$("#aboutContent").toggle(function() {
c++;
if (c % 2 == 0) alert("1")
else alert("2");
})
})<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
try this:
<button class="about">
click
</button>
<div id="aboutContent">
code..
</div>
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/43959834
复制相关文章
相似问题
腾讯云开发者
