Jquery animation function -click one div toggle another
If this jquery function always gives me the second function every time I click. How can I stop this?
I have a navigation bar that has 3 links and for each link I have a .contentDiv with different IDs. Every time someone clicks on one of these links, a toggle function occurs; hiding all .contentDiv expects the one associated with that link. and the slide animation to the left happens to this .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
});
}
);
});
source to share
You can create a function clickToggle
and use it to switch between functions when clicked:
Source: jQuery click / switch between two functions
(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>
source to share
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>
source to share
JQuery's toggle () function to switch between two given functions was deprecated in v1.8 and removed in 1.9 as mentioned here . toggle () is now used to toggle show () and hide ().
So, you need to create a custom toggle plugin as mentioned in another answer, or you can check this Stack Overflow question and answer .
source to share