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');
});
});
Related
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);
});
}
});
I'm trying to get this jQuery animated counter to trigger as soon as the user scrolls more than 200 pixels down the page:
Original jQuery code from here
$('.Count').each(function () {
var $this = $(this);
jQuery({ Counter: 0 }).animate({ Counter: $this.text() }, {
duration: 1000,
easing: 'swing',
step: function () {
$this.text(Math.ceil(this.Counter));
}
});
});
I've tried to wrap it in the following jQuery but it doesn't trigger the animation until the end:
$(window).scroll(function() {
if ($(window).scrollTop() > 200) {
$('.Count').each(function () {
var $this = $(this);
jQuery({ Counter: 0 }).animate({ Counter: $this.text() }, {
duration: 1000,
easing: 'swing',
step: function () {
$this.text(Math.ceil(this.Counter));
}
});
});
}
});
HTML:
<span class="Count">100</span>
<br/>
<span class="Count">200</span>
<br/>
<span class="Count">300</span>
The fiddle from the other post is here
What would be the best way to trigger the jQuery counter as soon as the user scrolls into view or 200 pixels down the page? I've also tried the jQuery Wayfinder but not had any luck with making it work.
Unbind the scroll handler (with $(window).off("scroll")) before triggering the animation to prevent the animation from restarting if the user continues to scroll.
$(window).scroll(startCounter);
function startCounter() {
if ($(window).scrollTop() > 200) {
$(window).off("scroll", startCounter);
$('.Count').each(function () {
var $this = $(this);
jQuery({ Counter: 0 }).animate({ Counter: $this.text() }, {
duration: 1000,
easing: 'swing',
step: function () {
$this.text(Math.ceil(this.Counter));
}
});
});
}
}
body {
font-family: sans-serif;
height: 300vh;
}
.Count {
position: fixed;
top: 8px;
left: 8px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="Count">100</div>
Gilly's answer is a good one,
but it's missing the part for making it start at 0 and get to a certain value;
this is what you could do:
var stop = $("#someElement").offset().top;
$(window).scroll(function() {
if ($(window).scrollTop() > stop ) {
$(window).off("scroll");
$('.Count').each(function () {
var $this = $(this);
jQuery({ Counter: 0 }).animate({ Counter: $this.attr("data") }, {
duration: 1000,
easing: 'swing',
step: function () {
$this.text(Math.ceil(this.Counter));
}
});
});
}
});
body {
font-family: sans-serif;
height: 300vh;
}
.Count {
position: fixed;
top: 8px;
left: 8px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="Count" data=200>0</div>
maybe a little late, but this code works when you get at the bottom of the page
jQuery(
function($)
{
var banderaEstandar= true;
$('#vista').on('scroll', function()
{
if($(this).scrollTop() + $(this).innerHeight()>=$(this)[0].scrollHeight && banderaEstandar)
{
$('.count').each(function () {
$(this).prop('Counter',0).animate(
{
Counter: $(this).text()
},
{
duration: 1000,
easing: 'swing',
step: function (now) {
$(this).text(Math.ceil(now));
}
});
});
banderaEstandar=false;
}
})
}
);
I have an sliding image and I have a problem it it. If you do fast mouseover over the images multiple times and then you get the mouse outside pics it still animates. Somehow it records and plays the animation even after you are not with mouse over it.
Here is my code and link to check it:
<script type="text/javascript">
$(document).ready(function() {
$('.col-md-4,.col-xs-4').hover(
function () {
$(this).find('#hoverpic').animate({ "top": "-=330px" }, "normal" );
},
function () {
$(this).find('#hoverpic').animate({ "top": "+=330px" }, "normal" );
});
});
</script>
add .stop()
function () {
$(this).find('#hoverpic').stop().animate({ "top": "-=330px" }, "normal" );
},
function () {
$(this).find('#hoverpic').stop().animate({ "top": "+=330px" }, "normal" );
});
if .stop() doesn't work well enough
you can try with .stop(true) or .stop(true, true)
http://api.jquery.com/stop
you should put a check for
if( $(elem).is(':animated') ) {...}
in your code.
<script type="text/javascript">
$(document).ready(function() {
$('.col-md-4,.col-xs-4').hover(
function () {
if(!$(this).is(':animated'))
$(this).find('#hoverpic').animate({ "top": "-=330px" }, "normal" );
},
function () {
if($(this).is(':animated'))
$(this).find('#hoverpic').animate({ "top": "+=330px" }, "normal" );
});
});
</script>
I usually add a class while it's animating.
Something like this:
$(document).ready(function() {
$('.col-md-4,.col-xs-4').hover(
function () {
if(!$(this).hasClass('animate')) {
$(this).addClass('animate');
$(this).find('#hoverpic').animate({ "top": "-=330px" }, "normal" );
}
},
function () {
if($(this).hasClass('animate')) {
$(this).find('#hoverpic').animate({ "top": "+=330px" }, "normal", function() { $(this).removeClass('animate'); } );
}
});
});
You need to make a simple change (see commented code) if you want to avoid the jumping image when hovering out before the animation finishes:
$('.col-md-4,.col-xs-4').hover(
function () {
$(this).find('#hoverpic').stop().animate(
{ "top": "0px" } //WAS -=330px
, "normal" );
},
function () {
$(this).find('#hoverpic').stop().animate({
"top": "330px" //WAS +=330px
}, "normal" );
});
I'm quite new to javascript and I'm having a difficult time with this multi function call
This bit is running fine
$('.pages').live("swiperight", function () {
if (!menuStatus) {
$(".ui-page-active").animate({
marginLeft: "165px",
}, 300, function () {
menuStatus = true
});
}
});
and I'd like to add
(document).scrollTop(0);
so that a user will be taken to the top of long pages as the menu opens... any help would be appreciated....
You should be able to use something like this to perform your scroll:
$("html, body").animate({ scrollTop: 0 }, "slow");
So if you wanted to add this to your current function as shown: (you can place it wherever you would like it to occur)
$('.pages').on("swiperight", function () {
if (!menuStatus) {
$(".ui-page-active").animate({
marginLeft: "165px",
}, 300, function () {
menuStatus = true
});
//Perform scroll-to-top action
$("html, body").animate({ scrollTop: 0 }, "slow");
}
});
additionally, this could should also work (as mentioned by Jan):
$('document').on("swiperight",".pages", function () {
if (!menuStatus) {
$(".ui-page-active").animate({
marginLeft: "165px",
}, 300, function () {
menuStatus = true
});
//Perform scroll-to-top action
$("html, body").animate({ scrollTop: 0 }, "slow");
}
});
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());
}
});