How would I reset a .click toggle function? - javascript

I'm making a infographic slider and I have buttons when clicked that reveal text. When I go to the next slider and then hit the previous button and go back my toggles reveal the text and then bounce back to be invisible.
Here is some of the code... I'm not sure if I should be resetting the css or Javascript div where each button is held? Please tell me how I can fix the toggle issue.
$( "#point1" ).click(function() {
$( "#timeline1" ).toggle( "slow", function() {
// Animation complete.
});
});
$( "#point2" ).click(function() {
$( "#timeline2" ).toggle( "slow", function() {
// Animation complete.
});
});
$( "#point3" ).click(function() {
$( "#timeline3" ).toggle( "slow", function() {
// Animation complete.
});
});
$( "#point4" ).click(function() {
$( "#timeline4" ).toggle( "slow", function() {
// Animation complete.
});
});
$( "#point5" ).click(function() {
$( "#timeline5" ).toggle( "slow", function() {
// Animation complete.
});
});
/ next and previous navigation functions
function showNextScreen() {
// check if nav is active
if (navActive) {
// disable nav
navActive = false;
// targets the current screen
currentScreen = "#screen" + screenNum;
// sets next screen number
screenNum++;
// show/hide nav
showHideNav(screenNum);
// targets the next screen
nextScreen = "#screen" + screenNum;
// transitions current screen out
gsap.fromTo(currentScreen, {
x: 0
}, {
duration: duration,
delay: 0.5,
x: -960,
ease: "power2.inOut"
});
// shows next screen
$(nextScreen).show();
// transitions next screen in
gsap.fromTo(nextScreen, {
x: 960
}, {
duration: duration,
delay: 0.5,
x: 0,
ease: "power2.inOut",
onComplete: function() {
// hide current screen
$(currentScreen).hide();
// enable nav
navActive = true;
}
});
// load function to animate on contents of screen
window["loadScreen" + screenNum]();
// stop voiceover from playing
$("#voiceover").trigger("pause");
}
}
function showPrevScreen() {
// check if nav is active
if (navActive) {
// disable nav
navActive = false;
// targets the current screen
currentScreen = "#screen" + screenNum;
// sets next screen number
screenNum--;
// show/hide nav
showHideNav(screenNum);
// targets the next screen
prevScreen = "#screen" + screenNum;
// transitions current screen out
gsap.fromTo(currentScreen, {
x: 0
}, {
duration: duration,
delay: 0.5,
x: 960,
ease: "power4.inOut"
});
// shows previous screen
$(prevScreen).show();
// transitions next screen in
gsap.fromTo(prevScreen, {
x: -960
}, {
duration: duration,
delay: 0.5,
x: 0,
ease: "power2.inOut",
onComplete: function() {
// hide current screen
$(currentScreen).hide();
// enable nav
navActive = true;
}
});
// load function to animate on contents of screen
window["loadScreen" + screenNum]();
// stop voiceover from playing
$("#voiceover").trigger("pause");
}
}
// next and previous button clicks
$("#next").click(showNextScreen);
$("#prev").click(showPrevScreen);
#point1 {
position: absolute;
top: 20%;
left: 8%;
transform: translate(-50%, -50%);
width: 45px;
cursor: pointer;
}
<img src="img/SVG/point1.svg" alt="fact" id="point1" class="point"/>
<img src="img/SVG/point2.svg" alt="fact" id="point2" class="point"/>
<img src="img/SVG/point3.svg" alt="fact" id="point3"class="point" />
<img src="img/SVG/point4.svg" alt="fact" id="point4"class="point" />
<img src="img/SVG/point5.svg" alt="fact" id="point5" class="point"/>
<div id="prev">BACK</div>
<div id="next">NEXT</div>

You need to use jquery's .off() method to remove the previous click event handler before adding .click() to the #points. Try this code
$( "#point1" ).off('click').click(function() {
$( "#timeline1" ).toggle("slow");
});
$( "#point2" ).off('click').click(function() {
$( "#timeline2" ).toggle("slow");
});
$( "#point3" ).off('click').click(function() {
$( "#timeline3" ).toggle("slow");
});
$( "#point4" ).off('click').click(function() {
$( "#timeline4" ).toggle("slow");
});
$( "#point5" ).off('click').click(function() {
$( "#timeline5" ).toggle("slow");
});

Related

How To Toggle Back To Original State

My Script Snippet:
$(document).on('click', function(e) {
if ($(e.target).closest('.input-actions.Actions').length) {
var CurrentWidth = $(e.target).width() + 'px',
OpenWidth = '308px';
if ($(e.target).is('.dropdown-toggle')) {
$(e.target).animate({
width:OpenWidth
}, {
direction: 'right',
duration: 500,
});
setTimeout(function() {
$(e.target).parent().find('.dropdown-menu').slideDown({
height: '249px',
}, {
duration: 500,
});
}, 800);
}
}
});
Script Explanation:
On click of the link, the button changes with to match the drop down via animate then with the delay the drop down slides down.
What I'd Like To Achieve:
I'd like to add, in the most simplistic way, a toggle feature so that upon clicking again the reverse occurs animating the $(e.target) back to CurrentWidth and $(e.target).parent().find('.dropdown-menu') to slide back up and hide.

jQuery animation out of sync

Very shortly after my animation starts, it goes out of sync.
The divs are supposed to fade in and fade out after one another.
Please take a look at my code below...
Thanks
(document).ready(function(){
animate_loop = function animate_loop(){
$( "#w01" ).animate({ opacity: 0.4, }, 1000,
function(){ $( "#w01").animate({ opacity: 1}, 600)
animate_loop();
} );
}
animate_loop();
animate_loop = function animate_loop(){
$( "#w02" ).animate({ opacity: 0.4, }, 1500,
function(){ $( "#w02").animate({ opacity: 1}, 600)
animate_loop();
} );
}
animate_loop();
animate_loop = function animate_loop(){
$( "#w03" ).animate({ opacity: 0.4, }, 2000,
function(){ $( "#w03").animate({ opacity: 1}, 600)
animate_loop();
} );
}
animate_loop();
animate_loop = function animate_loop(){
$( "#w04" ).animate({ opacity: 0.4, }, 2500,
function(){ $( "#w04").animate({ opacity: 1}, 600)
animate_loop();
} );
}
animate_loop();
});
If you want more control use the code below. I highly recommend using adding a class and then animating trough CSS instead of making a jquery loop.
Here's a new demo: http://jsfiddle.net/mirohristov/gw8kskom/1/
$(document).ready(function(){
$('#w01').delay(1000).queue(function(){
$(this).addClass("go");
});
$('#w02').delay(1500).queue(function(){
$(this).addClass("go");
});
$('#w03').delay(2000).queue(function(){
$(this).addClass("go");
});
$('#w04').delay(2500).queue(function(){
$(this).addClass("go");
});
});
If you are trying to just make a fade effect, use css and add a class at a different time with setInterval. Use .each(index, el) to iterrate trough each element. Index will be 1, 2, 3, 4, etc... so use that to delay your animation.
Here's a demo: http://jsfiddle.net/mirohristov/gw8kskom/
$(document).ready(function(){
$('.child').each(function(index, el){
setTimeout(function(){
$(el).addClass('go');
}, 200*index);
});
});

Jquery on click show mouseleave hide sidebar

Hi i need some with the this script i manage to show the panel with the mouseclick but i wanted when my mouse leave the panel it will close it
this is the sample http://jsfiddle.net/jikey/w9s7pt25/
$(function(){
$('.slider-arrow').click(function(){
if($(this).hasClass('show'))
{
$( ".slider-arrow, .spanel" ).animate({
right: "+=182"
}, 700, function() {
// Animation complete.
});
$(this).html('<img src="images/sideclose.png" />').removeClass('show').addClass('hide');
}
else
{
$( ".slider-arrow, .spanel" ).animate({
right: "-=182"
}, 700, function() {
// Animation complete.
});
$(this).html('<img src="images/sideopen.png" />').removeClass('hide').addClass('show');
}
});
});
Here you need to write 2 methods.
jQuery click to display the section on clicking on the arrow and jQuery onmouseleave to hide the section on coming out of the section.
I suggest you to display the slideopen.png and slideclose.png files in the (background style) CSS with respect to the classes.
Method 1: on click
jQuery Code:
$('.slider-arrow').on("click", function(){
if($(this).hasClass('show')){
$( ".slider-arrow, .panel" ).animate({
right: "+=300"
}, 700, function() {
// Animation complete.
}); $(this).html('«').removeClass('show').addClass('hide');
}
});
Method 2: on mouse leave
jQuery Code:
$(".panel").on("mouseleave", function(){
if(!$('.slider-arrow.show').hasClass('show')) {
$( ".slider-arrow, .panel" ).animate({
right: "-=300"
}, 700, function() {
// Animation complete.
});
$(".slider-arrow").removeClass('hide').addClass('show');
}
});
Demo link: http://jsfiddle.net/w9s7pt25/7/
What you can do is add a seperate mouseout function as illustrated in this jsfiddle. The problem with your code was that the mouseover event only acts on .slider-arrow once, changes the class to hide and then expects another mouseover to read that it needs to be hidden.
$(function () {
$('.slider-arrow').mouseover(function () {
if ($(this).hasClass('show')) {
$(".slider-arrow, .panel").animate({
right: "+=300"
}, 700, function () {
// Animation complete.
});
$(this).html('«').removeClass('show').addClass('hide');
}
});
$('.panel').mouseout(function () {
if ($('.slider-arrow').hasClass('hide')) {
$(".slider-arrow, .panel").animate({
right: "-=300"
}, 700, function () {
// Animation complete.
});
$('.slider-arrow').html('»').removeClass('hide').addClass('show');
}
});
});
Hope it makes sense.
You can use mouseout or mouseleave. I guess you would add some elements in panel. So mouseout fires when the pointer moves out of child element as well, while mouseleave fires only when the pointer moves out of the bound element
$('.panel').mouseleave(function() {
if($('.slider-arrow').hasClass('hide')){
$( ".slider-arrow, .panel" ).animate({
right: "-=300"
}, 700);
$('.slider-arrow').html('&raquo').removeClass('hide').addClass('show');
}
});
You can attach the jquery .mouseleave() function on the panel and let it execute only when the panel is visible also add a class like 'visible' to keep state of the visibility of your panel like so: http://jsfiddle.net/gakuru/d2qnrm2x/
$('.panel').on('mouseleave',function(){
if($(this).hasClass('visible')){
$( ".slider-arrow, .panel" ).animate({
right: "-=300"
}, 700, function() {
// Animation complete.
});
$('.slider-arrow').html('»').removeClass('hide').addClass('show');
$('.panel').removeClass('visible');
}
});

Prevent stack animation

I'm a javascript/jquery rookie, but I try to put in place a an interactive page containing multiple divs. These Divs enlight when we pass the mouse over and turn back to normal when mouse leaves the div. The div enlarges when clicked, and a "back" button" must turn back the div to "normal" state. My problem is the behavior of the div when click the back button, and it starts to get back to normal but enlarges again afterward. I know I could resolve the problem by moving the "button" out of the div, but is there any other solution ?
Also, how to "stop" the opacity change when enlarging the DIV ? Tried the stop() function in various scenarios but without success so far...
Thanks for the help.
Here is the HTML code :
<div id='container'>
<div id='back_button'>BACK</div>
</div>
And here is for the jQuery
$(document).ready(function () {
$('#container').hover(function () {
$(this).fadeTo('fast', 1);
}, function () {
$(this).fadeTo('fast', 0.8);
}).click(function () {
$(this).stop().animate({
width: "600px",
height: "600px",
opacity: 1
});
$('#back_button').fadeTo('fast', 1);
});
$('#back_button').click(function () {
$(this).stop( true, true ).parent().animate({
width: "200px",
height: "100px"
});
});
});
I also created an example on jsfiddle
Stop the click on the back button from propagating up to the parent, and you can use a class to disable the hover events when the element is enlarged.
$(document).ready(function () {
$('#container').hover(function () {
if ( ! $(this).hasClass('large') ) $(this).fadeTo('fast', 1);
}, function () {
if ( ! $(this).hasClass('large') ) $(this).fadeTo('fast', 0.8);
}).click(function () {
$(this).animate({
width: "600px",
height: "600px",
opacity: 1
}).addClass('large');
$('#back_button').fadeTo('fast', 1);
});
$('#back_button').click(function (e) {
e.stopPropagation();
$(this).parent().animate({
width: "200px",
height: "100px"
}).removeClass('large');
});
});
FIDDLE
please use this updated code
$(document).ready(function () {
$('#container').hover(function () {
$(this).stop().fadeTo('fast', 1);
}, function () {
$(this).stop().fadeTo('fast', 0.8);
}).click(function (e) {
if(e.target.id=="back_button" || $(this).width()>200){
return;
}
$(this).stop().animate({
width: "600px",
height: "600px",
opacity: 1
});
$('#back_button').fadeTo('fast', 1);
});
$('#back_button').click(function () {
$('#container').animate({
width: "200px",
height: "100px",
});
});
});

jquery animate then stop

Struggling a bit with jquery animate.
At the moment, if I continue to click button, clearly it shifts the object to the right 50px every time
$( ".button" ).click(function() {
$( "#object" ).animate({opacity: 1,right: "+=50",}, 500, function() {}
);
Is there a way of ensuring that one click moves it once, then a second click does not move it?
ie. a rule that moves it to right:50px and thats it, rather than + 50px?
Any assistance hugely appreciated!!
Use .one()
$( ".button" ).one('click',function() {
Fiddle Demo
You can use one():
$(".button").one('click', function () {
$("#object").animate({
opacity: 1,
right: "+=50",
}, 500, function () {
});
});
or I'd suggest you to disable the button to let your users know about your intention here:
$(".button").click(function () {
var $this = $(this);
$("#object").animate({
opacity: 1,
right: "+=50",
}, 500, function () {
$this.prop("disabled",true);
});
});

Categories

Resources