Im trying to make a box animate when i scroll down to its position, but the animation wont stop, the element just keeps repeating the animation forever.
The code im using :
jQuery(document).scroll(function (e) {
var value = jQuery(this).scrollTop();
if (value = 600) {
jQuery( "body" ).addClass( "scroll" );
jQuery('#car1').animate({top: '+=50px'}, 2000);
}
});
A single = isnt a comparison operator. It is in fact assigning a value to your variable.
That being said, your condition :
if (value = 600)
is always true since 600 is a truthy value.
Try using == or ===.
To anime once, you can use the class you are inputing on the body. Just invert your 2 lines and do a condition :
if(!jQuery("body").hasClass("scroll")) //Animate only if it haven't the class scroll
jQuery('#car1').animate({top: '+=50px'}, 2000);
jQuery( "body" ).addClass( "scroll" );
Related
I wanna move content with animation.
There's an animation in the jquery function, like that:
.on('click', '.btn', function () {
var contentWidth = $(window).width() - $('.sidebar').width();
$( ".content" ).animate({
left: "+=1000",
}, 5000, function() {
// moving content function
}
);
});
So, because I have various positions of content, I need to use this value in the variable contentWidth. How I can set this value in a variable and decrement the left value every time when I call a function?
Something like left: "+=contentWidth" doesn't work. Is where I make mistake?
Not sure if i got it but...
maybe you could use string interpolation
.on('click', '.btn', function () {
var contentWidth = $(window).width() - $('.sidebar').width();
$( ".content" ).animate({
left: `+=${contentWith}`,
}, 5000, function() {
// moving content function
}
);
});
Not tested but should work theoretically
(first question so be nice :) )
I'm trying to disable scroll, animate a div, then re-enable scrolling. So far I have accomplished the first two parts of this incredible quest, but alas, I cannot seem to get it to scroll again.
I am using lockScroll() and unlockScroll() functions defined by JeanValjean on How to programmatically disable page scrolling with jQuery
Any help would be much appreciated. Please see demo http://jsfiddle.net/Chris_James/1xxL5dnp/6/
jQuery(document).ready(function(){
$(window).scroll(function(){
var p = $( ".testi" );
var offset = p.offset();
if ($(this).scrollTop() > offset.top - $(window).height()/2) {
lockScroll();
$('.testi').addClass( 'testishow' );
setTimeout(function(){
$('.testimonial').fadeIn('fast');
unlockScroll();
},700);
}
})
});
jQuery(document).ready(function(){
$(window).scroll(function(){
var p = $( ".testi" );
var offset = p.offset();
if ($(this).scrollTop() > offset.top - $(window).height()/2) {
lockScroll();
$('.testi').addClass( 'testishow' );
setTimeout(function(){
$('.testimonial').fadeIn('fast', function() {
unlockScroll();
});
},700);
}
})
Like Good.luck recommended, you can you use callbacks for unlocking (Well, I was a few seconds to late...). I think you don't have to declare a function just unlockScroll.
The lock/unlockScroll() methods seems to a bit to be overweight.
I would recommend cubbius answer with an "overflow: hidden" style for the html element.
Make a function out of your current scroll event and unlock it with:
$(window).off("scroll touchmove mousewheel", function () {
$(window).on("click", yourScrollMethod);
})
Solution - adding a class (scrolllocked) to if statement, and checking for it (with &&). Simples. http://jsfiddle.net/Chris_James/1xxL5dnp/6/
if ($(this).scrollTop() > offset.top - $(window).height()/2 && !p.hasClass("scrollLocked")) {
lockScroll();
p.addClass("scrollLocked");
$('.testi').addClass( 'testishow' );
You can use function callbacks for this e.g.
$('.testimonial').fadeIn('fast', function(){
unlockScroll();
});
In this case function unlockScroll() will execute only after fadeIn finished it's animation.
UPD: Added Fiddle
I have a grid width dynamic boxes where on parent mouseleave if input value is changed the boxes resize. Equal resize is not complete but for the purpose of this question it works.
in boxes add anything that equals to 100 eg: 40 10 10 10 30 or 50 50 0 0 0
http://jsfiddle.net/MT4Fp/16/
$('ul').on('mouseleave', function (event) {
var elems = $(this).find('input');
elems.each(function (el, i) {
$(this).parent().parent().animate({
width: $(this).val() + '%'
}, 500);
if ($(this).val() <= 1) {
$(this).parent().parent().addClass('hidden');
} else if ($(this).val() > 1) {
$(this).parent().parent().removeClass('hidden');
}
});
});
problem i have is that on mouseleave even if you dont change anything the animate starts animating , you can see this when you enter/leave the grid , the size of grid will change for few sec.
how can i run animate only if the input is changed? I have tried , keyup , change and few other methods but could not get it to work. The main thing is that the animation fires only on grid leave and if something is changed.
any help is appreciated. Thank you!
OK, a comment is not to big.
var i = $("#inputid").val();
$('ul').on('mouseleave', function (event) {
if ($("#inputid").val() == i){return true;}
EDITED: i = $("#inputid").val();
var elems = $(this).find('input');
elems.each(function (el, i) {
$(this).parent().parent().animate({
width: $(this).val() + '%'}, 500);
if ($(this).val() <= 1) {
$(this).parent().parent().addClass('hidden');
} else if ($(this).val() > 1) {
$(this).parent().parent().removeClass('hidden');
}
});
});
Also, you may consider targeting elements like $('ul').on('mouseleave','.i',....)
Sorry, I edited. If it is a change, addit to the value of i var.
You want to animate for value change, not for 'mouseleave'. So bind value change with this method.
jQuery('input[type="text"]').on('input', function() {
// do work such as animate ...
console.log($(this).val()); // i tried with this and get value
})
For some reason, when I try to toggle a div between two sizes using .animate, it simply disappears rather than scaling to the size I want it to. I have played with all of the the syntax and little things in so many ways, but nothing works. Here is the jquery that I have used and messed around with a bunch.
$("#expandable").click(
function() {
$("#expandable").toggle(
function() {
$("#expandable").animate(
{width:600, height:600}
)
},
function() {
$("#expandable").animate(
{width:400, height:200}
);
}
);
}
);
I have a jsfiddle here for you to look at.
http://jsfiddle.net/justinbc820/qt7GV/
Try it without using toggle
http://jsfiddle.net/qt7GV/9/
$(document).ready(function(){
$("#expandable").click(function(){
var divheight = $(this).height();
if (divheight == 400)
{
$(this).animate({height:'150px', width:'150px' });
}
else
{
$(this).animate({height:'400px', width:'400px' });
}
});
});
Take a look at this http://jsfiddle.net/qt7GV/4/
$("#expandable").click(function() {
if ($(this).width() < 600) {
$(this).animate(
{width:600, height:600}
)
} else {
$(this).animate(
{width:400, height:200}
);
}
});
http://api.jquery.com/toggle/
Description: Display or hide the matched elements.
var on = false;
var box = $("#expandable");
box.click(
function() {
if (on = !on) {
box.animate(
{width:600, height:600}
)
} else {
box.animate(
{width:400, height:200}
);
}
}
);
According to http://api.jquery.com/toggle-event/
Note: This method signature was deprecated in jQuery 1.8 and removed in jQuery 1.9. jQuery also provides an animation method named .toggle() that toggles the visibility of elements. Whether the animation or the event method is fired depends on the set of arguments passed.
Here is one way to do it
$('#expandable').data('flag', true);
$("#expandable").click(
function() {
$("#expandable").animate(
$(this).data('flag')
? {width:600, height:600}
: {width:400, height:200}
)
$(this).data('flag', !$(this).data('flag'));
}
);
I have a js transition I can not resolve. There are three links, blue/green/red, when you select one of the links a color swatch slides into the up position. Push that same link again to make the color swatch slide into the down position.
How can I have each swatch slide all other swatches into the down position before sliding into the up position?
// When the DOM is ready, initialize the scripts.
jQuery(function( $ ){
// Get a reference to the container.
var container = $( ".container" );
// Bind the link to toggle the slide.
$( "a" ).click(
function( event ){
// Prevent the default event.
event.preventDefault();
// Toggle the slide based on its current visibility.
if (container.is( ":visible" )){
// Hide - slide up.
container.slideUp(500, function(){ $('').show(); });
} else {
// Show - slide down.
container.slideDown(500, function(){ $('').hide(); });
}
}
);
});
JSFiddle Demo
I've forked your jsfiddle with a simple solution: http://jsfiddle.net/cwmanning/jvj2u/2/
All in the fiddle, but it uses data attributes to switch classes instead of onClick attributes.
// Bind the link to toggle the slide.
$( "a" ).click(function( event ){
// Prevent the default event.
event.preventDefault();
var $this = $(this);
var $target = $("#target");
if ($target.attr("class") === $this.attr("data-color")) {
container.slideUp(500);
} else {
// Hide - slide up.
container.slideUp(500, function(){
$target.attr("class", $this.attr("data-color"));
// Show - slide down.
container.slideDown(500);
});
}
});
This is a quick workaround. I am sure there is a much more elegant way, but seems to work.
just change the following:
function slider(v) {
colors = {
'blue':'blue2',
'red' :'red2',
'green':'green2'
}
var confirm = document.getElementById("target");
if (colors.hasOwnProperty(v)){
setTimeout(function(){target.className = colors[v]},500);
}else {target.className = "chart";}
}
Substitute the following in place where you currently have the if(.... is(":visible").
I don't mean at the bottom of the code. Just sub the following in where it sits now in your code.
if (container.is( ":visible" )){
// Hide - slide up.
container.slideUp(500,function(){$().hide()});
setTimeout(function(){
container.slideDown(500, function(){ $('').show(); })
},500);
}else{
container.slideDown(500,function(){$().hide()})
}