jQuery: Mouse Interaction + Simple Animation [img] - javascript

I'm new to jQuery so please work with me here. :)
[Site Image] http://imgur.com/zx803Ct
So I'm trying to have the bottles here to animate with cursor interaction.
Goal: I want the hovered image to come to the foreground and the rest to shrink into the background.
Undesired Results: The code seems to shrink all the bottles without condition. I seem to be running into trouble with the "if, then, else" section.
Process:
Store 'mouseEntered' element, do for each bottle, check if match, apply effects.
Code:
$(".sauce_bottle").mouseenter( function(){
var $active = $(this); //The "entered" image
//For each (div) bottle, check if "entered", apply effects
$('.sauce_bottle').each( function(){
if ( $active == $(this) ) {
//Shrink
alert($active.attr("alt"));
$(this).animate({
height: "230px",
width: "70px",
opacity: ".70"},
150);
} else {
//or Enlarge
$(this).animate({
height: "279px",
width: "85px",
opacity: "1"},
150, function(){});
}
});
});
If I'm missing a concept (scope) or if you guys have an alternative way of doing this that would be fantastic!
Thanks guys! :)

I would do it like this:
$(".sauce_bottle").mouseenter( function() {
$(this).animate({
height: "279px",
width: "85px",
opacity: "1",
}, 150);
$(".sauce_bottle").not(this).animate({
height: "230px",
width: "70px",
opacity: ".70",
}, 150);
});

Related

JQuery .animate(); not working with fixed height

I've worked with this many times and have had no problem. Animating the height and/or width of a DIV either by width/height: 'toggle' or replacing 'toggle' with specified width/height.
setTimeout( function(){
$('.input-group .Advanced').animate({
height: 'toggle'
}, {
duration: 500,
});
} , 500);
height: 'toggle' - Demo on JSFiddle
height: '400px' - Demo on JSFiddle
The code snippet works perfectly fine however I need this to be set to a specific height and replacing my 'toggle' to a fixed height such as '400px' does absolutely nothing...
$('.form-control' ).click(function(e) {
$(this).addClass('InputFreezeFocus');
$(this).animate({
width: '400px'
}, {
direction: 'left',
duration: 500,
});
setTimeout( function(){
$('.input-group .Advanced').animate({
height: '400px',
opacity: 'toggle'
}, {
duration: 500,
});
} , 500);
});
The .animate() method does not make hidden elements visible as part of the effect so you have to toggle the opacity.
Link to fiddle
Your given height is not working because you have set a display:none to your .Advanced class. When you use jquery inbuilt toggle string it will take care of that and make your hidden element in view.But, when you define your own height you also have to display that element in view otherwise animation will work but not display. You can refer Jquery animate() reference .It's written there
Note: Unlike shorthand animation methods such as .slideDown() and .fadeIn(), the .animate() method does not make hidden elements visible as part of the effect. For example, given $( "someElement" ).hide().animate({height: "20px"}, 500), the animation will run, but the element will remain hidden.
You can do this to animate your class
setTimeout( function(){
$('.input-group .Advanced').animate({
height: '500px',
opacity:'show'
}, {
duration: 500
});
} , 500);
This will get your hidden element in view.Demo of your code

overflow-y: scroll causing issues with JQuery

When I add overflow-y:scroll to the .nav styling the button to open the navigation requires 2 clicks. Change this to overflow: none and it only requires 1 click as intended when using the following jquery:
$(function(){
var nav = $('.nav'),
navBut = $('.navBut');
navBut.click(function(){
if(nav.width() === 0){
nav.stop().animate({ width: '15%', opacity: '1.0' }, 300);
} else {
nav.stop().animate({ width: '0', opacity: '0.0' }, 300);
}
});
Can anybody see why this would be the case or how I can solve this?
http://jsfiddle.net/9ubxyw0t/2/
Rather than checking if the width of .nav is equal to 0, you need to check to see if it is less than or equal to 0.
Your original issue only seemed to effect certain browsers. It seems like some browsers would give the element a negative width when the overflow property was set to scroll. I guess this is just a cross-browser rendering inconsistency.
Updated Example
var nav = $('.nav'),
navBut = $('.navBut');
navBut.on('click', function () {
if (nav.width() <= 0) {
nav.stop().animate({
width: '15%',
opacity: '1.0'
}, 300);
} else {
nav.stop().animate({
width: '0',
opacity: '0.0'
}, 300);
}
});

Working with JQuery animate and "this" selector

I'm working on what I thought would be a simple chunk of code, trying to dynamically (using 'this') animate div blocks to scale (zoom) to the size of the parent container (section tag) on click.
My HTML:
<section>
<div id="project"></div><div id="project"></div><div id="project"></div>
<div id="project"></div><div id="project"></div><div id="project"></div>
</section>
My JavaScript:
$("#project").click(function() {
$(this).animate({
opacity: 0.75,
width: 100%,
height: 100%
}, 5000, function() {
});
});
Both Jquery and Jquery UI are linked correctly from Google Libraries (so says my console), my console also tells me that there is a syntax error with an unexpected ",", however I am taking this syntax straight from JqueryUI.com. Any help is appreciated!
Additionally, I want to be able to dynamically select all other divs except the currently clicked div and remove them from the DOM (using display:none), just so it looks cleaner, but I don't know how to go about 'selecting' them in my code...
Thanks all! :)
you are missing quotes around 100% so your code will be correct like this
$("#project").click(function() {
$(this).animate({
opacity: 0.75,
width: "100%",
height: "100%"
}, 5000, function() {
});
and please use unique IDs
Edit:
for using classes you can use something like that
$(".project").click(function() {
$(".project").css({'display':'none'});
$(this).css({'display':'block'});
$(this).animate({
opacity: 0.75,
width: "100%",
height: "100%"
}, 5000, function() {
});
I want to be able to dynamically select all other divs except the currently clicked div and remove them from the DOM (using display:none), just so it looks cleaner, but I don't know how to go about 'selecting' them in my code...
var $project = $(".project");
$project.click(function() {
var thisDiv = this;
$project.each(function(index, elem) {
if (elem!==thisDiv) $(elem).css('display', 'none');
});
$(thisDiv).animate({
opacity: 0.75,
width: "100%",
height: "100%"
}, 5000, function() {});
});

How to track element movement and trigger function at specific spot?

I have a #ball that when clicked uses jquery animate to move down 210px using this code:
$('#ball').click(function() {
$(this).animate({
top: '+=210px'
}, 500);
setTimeout(crack, 400);
});​
currently Im using Timeout to trigger the next function which is "crack".
Instead I want to track the movement of #ball and when its css top = 210px I want to trigger the function crack(), how can I do this?
I saw in a somewhat similar post that the Step function might be what I'm looking for, but I am not sure how to approach that solution based on the info provided at http://api.jquery.com/animate/
Look at Demo: http://jsfiddle.net/EnigmaMaster/hbvev/4/
I am not sure why you want to use a tracker if you know that the ball will reach the box in 210px.
If you want to get rid of setTimeout, then use the .animate callback function which will be called when the ball reaches the box.
$('#ball').click(function() {
$(this).animate({
top: '+=210px'
}, 500, crack); //<== crack will be called after ball animation
});​
DEMO
Incase if you want to call crack when the ball touches the box and still continue the movement of box then you can execute it 2 steps like below,
$('#ball').click(function() {
$(this).animate({
top: '+=180px'
}, 400, function() {
crack();
$(this).animate({
top: '+=30px'
}, 100);
});
});
Also check this version for fun in slow motion http://jsfiddle.net/skram/hbvev/8/
If you truly want to do something based on the position of the ball, then yes, step is probably the best way to go:
$('#ball').click(function() {
$(this).animate({
top: '+=210px'
}, {
duration: 500,
step: function() {
if($(this).offset().top > 208) {
crack();
}
}
});
});
Demo: http://jsfiddle.net/qJjnN/1/
Now, there are a couple of caveats:
There will be a possible performance hit.
The position at each step will not necessarily be a whole number, and the object will not exist at every pixel between the start and stop location.
step is not called on the final position, so you cannot actually check for 210 if it is the final location.
Taking those into mind, you will not be able to check for the exact position of 210px. Instead, you will want to watch when it passes a certain position and only trigger crack at that point and not every point after:
$('#ball').click(function() {
var cracked = false;
$(this).animate({
top: '+=210px'
}, {
duration: 500,
step: function() {
if($(this).offset().top > 208 && !cracked) {
cracked = true;
crack();
}
}
});
});
Demo: http://jsfiddle.net/qJjnN/2/
The step function also has parameters now and fx that can be used to see the current value of the css being animated. step is called for each step of each css attribute being animated. So, you have to be careful using those, because you need to look at fx to see what attribute value you are looking at (if you are animating more than one, i.e. top and left).
$('#ball').click(function() {
var cracked = false;
$(this).animate({
top: '+=210px'
}, {
duration: 500,
step: function(now, fx) {
if(fx.prop != 'top') {
return;
}
if(now > 208 && !cracked) {
cracked = true;
crack();
}
}
});
});

fadeOut() and slideUp() at the same time?

I have found jQuery: FadeOut then SlideUp and it's good, but it's not the one.
How can I fadeOut() and slideUp() at the same time? I tried two separate setTimeout() calls with the same delay but the slideUp() happened as soon as the page loaded.
Has anyone done this?
You can do something like this, this is a full toggle version:
$("#mySelector").animate({ height: 'toggle', opacity: 'toggle' }, 'slow');
For strictly a fadeout:
$("#mySelector").animate({ height: 0, opacity: 0 }, 'slow');
Directly animating height results in a jerky motion on some web pages. However, combining a CSS transition with jQuery's slideUp() makes for a smooth disappearing act.
const slideFade = (elem) => {
const fade = { opacity: 0, transition: 'opacity 400ms' };
elem.css(fade).slideUp();
};
slideFade($('#mySelector'));
Fiddle with the code:
https://jsfiddle.net/00Lodcqf/435
In some situations, a very quick 100 millisecond pause to allow more fading creates a slightly smoother experience:
elem.css(fade).delay(100).slideUp();
This is the solution I used in the dna.js project where you can view the code (github.com/dnajs/dna.js) for the dna.ui.slideFade() function to see additional support for toggling and callbacks.
The accepted answer by "Nick Craver" is definitely the way to go. The only thing I'd add is that his answer doesn't actually "hide" it, meaning the DOM still sees it as a viable element to display.
This can be a problem if you have margin's or padding's on the 'slid' element... they will still show. So I just added a callback to the animate() function to actually hide it after animation is complete:
$("#mySelector").animate({
height: 0,
opacity: 0,
margin: 0,
padding: 0
}, 'slow', function(){
$(this).hide();
});
It's possible to do this with the slideUp and fadeOut methods themselves like so:
$('#mydiv').slideUp(300, function(){
console.log('Done!');
}).fadeOut({
duration: 300,
queue: false
});
I had a similar problem and fixed it like this.
$('#mydiv').animate({
height: 0,
}, {
duration: 1000,
complete: function(){$('#mydiv').css('display', 'none');}
});
$('#mydiv').animate({
opacity: 0,
}, {
duration: 1000,
queue: false
});
the queue property tells it whether to queue the animation or just play it right away
Throwing one more refinement in there based on #CodeKoalas. It accounts for vertical margin and padding but not horizontal.
$('.selector').animate({
opacity: 0,
height: 0,
marginTop: 0,
marginBottom: 0,
paddingTop: 0,
paddingBottom: 0
}, 'slow', function() {
$(this).hide();
});

Categories