https://jsfiddle.net/rabelais/6rdzb1x9/
Please see the fiddle above.
When user clicks on the work link the first menu slides out.
When the user clicks on the Igna link a second menu slides out.
When the user clicks on the menu link again both menus slide away.
Question: How do I re-code this so that the first menu slides away only when the second menu has finished sliding back away?
$('#menu').click(function () {
if ($('#fatal').css('display') == 'none') {
$('#fatal').animate({ left: 'toggle' }, 300);
window.setTimeout(function () {
$('#igna, #black').slideToggle("slow");
}, 100);
}
else {
$('#black, #igna, #igna-1').slideUp("fast");
window.setTimeout(function () {
$('#fatal, #igna-2').animate({ left: 'hide' }, 300);
}, 300);
}
});
$('#igna').click(function () {
if ($('#igna-2').css('display') == 'none') {
$('#igna-2').animate({ left: 'show' }, 300);
window.setTimeout(function () {
$('#igna-1').slideToggle("slow");
}, 300);
}
else {
$('#igna-1').slideToggle("fast");
window.setTimeout(function () {
$('#igna-2').animate({ left: 'hide' }, 300);
}, 300);
}
});
As I mentioned in my comment you can use the callback function within slideToggle() and animate(). This will trigger an event after the animation has been completed. I only modified the $('#menu') click event for this and left the rest the same.
Fiddle
$('#menu').click(function() {
if ($('#igna-1').css('display') != 'none') {
$('#igna-1').slideToggle("fast", function() {
$('#igna-2').animate({
left: 'hide'
}, 300, function() {
$('#black, #igna, #igna-1').slideUp("fast", function() {
$('#fatal, #igna-2').animate({
left: 'hide'
}, 300);
});
});
});
} else if ($('#fatal').css('display') == 'none') {
$('#fatal').animate({
left: 'toggle'
}, 300, function() {
$('#igna, #black').slideToggle("slow");
});
} else {
$('#black, #igna, #igna-1').slideUp("fast", function() {
$('#fatal, #igna-2').animate({
left: 'hide'
}, 300);
});
}
});
Related
I'd like to create two functions without using jQuery to scroll from top to bottom and bottom to top with a timeout.
My code using jQuery (it works) :
function scrollToTop() {
setTimeout(function() {
$('html, body').animate({ scrollTop: 0 }, {
duration: 10000,
complete: function() {
scrollToBottom();
}
});
}, 10000);
}
function scrollToBottom() {
setTimeout(function() {
$('html, body').animate({ scrollTop: $(document).height() }, {
duration: 10000,
complete: function() {
scrollToTop();
}
});
}, 10000);
}
scrollToBottom();
You can use this:
// top
setTimeout(() => window.scrollTo(0,0), 1000);
// bottom
setTimeout(() => window.scrollTo(0, document.body.scrollHeight), 1000);
You could use the scroll method, it's a native method and also has a option for different behavior.
function scrollToTop() {
setTimeout(function() {
window.scroll({
top: 0,
left: 0,
behavior: 'smooth'
});
}, 10000);
}
function scrollToBottom() {
setTimeout(function() {
window.scroll({
top: 1000,
left: 0,
behavior: 'smooth'
});
}, 10000);
}
On my webpage I have a members button which animates a dropdown when toggled. The only problem is that it animates every time I load a page without clicking the button to cause the action. I would like it to only open when the button is clicked and be hidden completely the rest of the time.
The javascript I am using is:
$(document).ready(function() {
$('#members').animate({
marginTop: '-80px'
}, 0);
$('.mem').toggle( function() {
$('#members').animate({
marginTop: '0'
}, 500);
},
function() {
$('#members').animate({
marginTop: '-80px'
}, 500);
});
});
As you can see it first animates the div to be -80px. I want it to be -80px without having to animate it every time I load up any page.
Thanks!
To #members css class, just add that:
display:none;
I also updated the javascript:
$(document).ready(function() {
$('#members').css({
marginTop: '-80px'
});
$('.mem').toggle(function(){
$('#members').css({
display: 'block'
});
$('#members').animate({
marginTop: '0'
}, 500);
},
function(){
$('#members').animate({
marginTop: '-80px'
}, 500);
});
});
You need to attach the animate function to a button click. Since you haven't posted the HTML, you'll need to replace "buttonSelector" with the actual selector you want to use.
For example
$(document).ready(function () {
$(buttonSelector).click(function () {
$('#members').animate({
marginTop: '-80px'
}, 0);
$('.mem').toggle(function () {
$('#members').animate({
marginTop: '0'
}, 500);
}, function () {
$('#members').animate({
marginTop: '-80px'
}, 500);
});
});
});
I'm using FancyBox 2.1.5.
I need a fullscreen ad (html) to be shown on homepage after it loads and closing this ad with 2 options: standard with user' click and auto hiding if no action during 15 seconds.
First task is not a problem with:
$.fancybox.open([
{
href : 'http://fancyapps.com/fancybox/demo/1_b.jpg',
title : 'Title'
}
], {
padding : 0
});
But how to set a counter and autohide?
I'm thinking of following:
$(document).ready(function() {
$('.fancybox').fancybox.open([
{
href : 'http://fancyapps.com/fancybox/demo/1_b.jpg',
title : 'Title'
}
], {
padding : 0
});
$('.fancybox').fancybox({
afterShow: function(){
setTimeout( function() {$.fancybox.close(); },15000);
},
afterClose: function(){
clearTimeout( );
},
});
});
Is this correct?
Thanks in advance for your help!
I think you should rather do
$(document).ready(function () {
$.fancybox.open([{
href: 'http://fancyapps.com/fancybox/demo/1_b.jpg',
title: 'Title'
}], {
padding: 0,
afterShow: function () {
setTimeout(function () {
$.fancybox.close();
}, 15000);
},
afterClose: function () {
clearTimeout();
}
});
});
See JSFIDDLE
EDIT :
As properly pointed out by djdavid98, clearing time out on afterClose callback is redundant.
$(document).ready(function () {
$.fancybox.open([{
href: 'http://fancyapps.com/fancybox/demo/1_b.jpg',
title: 'Title'
}], {
padding: 0,
afterShow: function () {
setTimeout(function () {
$.fancybox.close();
}, 15000);
}
});
});
See updated JSFIDDLE
You can use the delay and click function together on page load to exe.c and then fadeout after 15 seconds
here is a working jsfiddle:
http://jsfiddle.net/YnT2X/
I don't want the div to display until AFTER the return animation completes.
jQuery:
$(document).ready(function () {
$("#menu").hover(function () {
$('#arrow').hide();
$("body").children(':not(#menu)').css("-webkit-filter", "blur(2px)");
$(this, '#arrow').stop().animate({
width: "200px"
}, 250,
function () {
if ($('#menu').width() == '200') {
$('.text').fadeIn(200);
}
});
}, function () {
$(this).stop().animate({
width: "0px"
}, 250)
$("body").children(':not(#menu)').css("-webkit-filter", "none");
$('.text').fadeOut('fast');
$('#arrow').show();
});
});
Try this:
Fiddle: http://jsfiddle.net/upycZ/
$(document).ready(function () {
$("#menu").hover(function () {
$('#arrow').hide();
$("body").children(':not(#menu)').css("-webkit-filter", "blur(2px)");
$(this, '#arrow').stop().animate({
width: "200px"
}, 250,
function () {
if ($('#menu').width() == '200') {
$('.text').fadeIn(200);
}
});
}, function () {
$(this).stop().animate({
width: "0px"
}, 250,function(){
$('#arrow').show(); //<- Shows arrow after run
});
$("body").children(':not(#menu)').css("-webkit-filter", "none");
$('.text').fadeOut('fast');
});
});
How do I make this script disable animation if it's already animating?
<script type="text/javascript">
$(document).ready(function() {
$("#nav").hover(
function() {
$("#header-wrapper").animate({height:140},500);
$("#dropdown").animate({height:100},500);
},
function() {
$("#header-wrapper").animate({height:40},500);
$("#dropdown").animate({height:0},500);
}
);
});
</script>
I'm really new to jQuery and what I've found through searching hasn't really helped.
Use .stop()
$("#nav").hover(
function() {
$("#header-wrapper").stop(true,false).animate({height:140},500);
$("#dropdown").stop(true,false).animate({height:100},500);
},
function() {
$("#header-wrapper").stop(true,false).animate({height:40},500);
$("#dropdown").stop(true,false).animate({height:0},500);
}
);
Use the .stop() jQuery function
$("#dropdown").stop().animate({height:0},500);
try this:
$("#nav").hover(function() {
if (!$("#header-wrapper").is(':animated')) {
$("#header-wrapper").animate({
height: 140
},
500);
$("#dropdown").animate({
height: 100
},
500);
} else {
$("#header-wrapper").stop(true, false).css('height', $("#header-wrapper").height());
$("#dropdown").stop(true, false).css('height', $('#dropdown').height());
}
},
function() {
if (!$("#header-wrapper").is(':animated')) {
$("#header-wrapper").animate({
height: 40
},
500);
$("#dropdown").animate({
height: 0
},
500);
} else {
$("#header-wrapper").stop(true, false).css('height', $("#header-wrapper").height());
$("#dropdown").stop(true, false).css('height', $("#dropdown").height());
}
});