We Keep Coding

Shrinking an image to the coordinates of a mouse click position? (jQuery)

I'm pretty new to this, but I've been fiddling around trying to get an image to shrink to nothing on a central point, which works fairly well using a combination of the below code and relative positioning in the CSS.
$(function() {
$('#imageID').on('click', function() {
$(this).animate({
width: 0,
height: 0,
top: '185px',
left: '-2px'
}, 200);
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
What I'd like to be able to do, however, is to change this so that the image shrinks centred on the point where the click was made. I've had a go at trying out absolute positioning and trying to set the top / left to the values of pageX and pageY (and also with the extra step of assigning them to variables) but no dice.
Does anyone have any idea of how / if this can be done? Thanks.

First of all welcome to Stack Overflow!
How about using CSS animations for this?
Use transform instead of width and height in animations for a better performance.
CODE SNIPPET:
$(function() {
$('#imageID').on('click', function() {
$(this).addClass("shrink");
});
});
.shrink {
animation: shrink 300ms linear forwards;
}
#keyframes shrink {
to {
transform: scale(0);
}
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<img id="imageID" src="http://fillmurray.com/300/300">
Here's more info on CSS transform and animation properties.

$(function() {
$('#imageID').on('click', function() {
$(this).animate({
width: 0,
height: 0,
top: '185px',
left: '-2px'
}, 200);
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

Animation is sticking when I drag the cursor

I'm a super novice (I learned html, css, jQuery last week on codeAcademy) so this may be a dumb question.
However, when I drag my cursor quickly across the block in the following example the animation seems to stick, in other words, the blocks remain opaque. Could you all help me? My code it linked below. Thank you in advance.
http://jsfiddle.net/ivanjsfiddle00/eFShc/1/
$(document).ready(function() {
$(".button").hover(function() {
$(this).filter(':not(:animated)').animate({"opacity": 1 })
}, function() {
$(this).filter(':not(:animated)').animate({"opacity": 0.5 })
});
});
EDIT:
Thank you all. Substituting filter(':not(:animated)') with stop(true) worked.

You need to use stop() to clear the animation queue between events. This also makes your filter(':not(:animated)') redundant.
$(".button").hover(function () {
$(this).stop(true).animate({
"opacity": 1
})
}, function () {
$(this).stop(true).animate({
"opacity": 0.5
})
});
Example fiddle

#Rory seems to have answered the original question, but it's worth pointing out that another option would be to use CSS and make use of the :hover pseudo element.
.button {
float: left;
margin: 1px;
opacity: 0.5;
display: inline-block;
background-color: #757575;
width: 50px;
height: 50px;
}
.button:hover{
background-color:#323a44;
}

detecting if the element is in animating before animate
add if($(this).is(":animated")) return false; before your animate code

get previous siblings, accordion effect

I'm trying to get an accordion effect on a DIV when hovering.
The right side of the accordion is working already, but the left one isn't.
I put my code in jsFiddle
Can someone please help me with the left side? I've been trying it for hours but it won't work :(
Javascript:
$(document).ready(function () {
$('.middle').hover(function () {
$(this).siblings().stop().animate({
opacity: 1
}, 200);
},
function () {
$(this).siblings().stop().animate({
opacity: 0
}, 200);
});
});

The reason the right is fading, and the left isn't is because you are applying a CSS transition to the right side spans.
You can easily address this by applying the same transition to <span> tags:
.squares span {
transition-property:opacity;
transition-duration:1s;
transition-delay:0.1s;
}
In fact, you could condense your code and make it easier to adjust overall by combining repeated styles across the multiple spans into single definitions.
For example:
.squares span {
opacity: 0;
float: left;
width: 139px;
height: 138px;
transition-property:opacity;
transition-duration:1s;
transition-delay:0.7s;
}
span.middle {
background:#0f0;
opacity: 1;
}
span.left1,
span.right1 {
background:#00F;
transition-delay:0.1s;
}
span.left2,
span.right2 {
background:#0FF;
transition-delay:0.3s;
}
span.left3,
span.right3 {
background:#0F0;
transition-delay:0.5s;
}
span.left4,
span.right4 {
background:#FF0;
transition-delay:0.7s;
}
See the working example here: http://jsfiddle.net/uBBZ2/14/

In your css you set the transition-property and transition-duration settings on the right side blocks, but not the left side ones. If you comment them out, both transitions happen quickly and at the same time. If you add those settings mirrored to the left side, they both happen more slowly.

Simple JQuery Fade In/Out

So what I'm trying to do is getting a div with an animation to show up only when I hover a button. I want that div to be invisible until the page hovers it, and I want it to go back being invisible once the mouse is no longer hovering the button.
Also, I want to do this with JQuery since I've kept far away from it for too long.
JQuery Code:
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.min.js" type="text/javascript"></script>
<script type="text/javascript">
$(document).ready(function(){
$('#about').hover(function(){
$('#about_hover').stop(true, true).animate({
width: '150px',
opacity: '0.8',
}, 300);
}, function(){
$('#about_hover').animate({
width: '0px',
opacity: '0',
}, 300);
});
});
</script>
HTML Code:
<div id="about_hover">
<img src="images/hover.gif">
</div>
<img src="images/menu/about.png">
<br>
CSS:
#about_hover {
text-align: right;
width: 150px;
float: left;
margin: 5px 0px 0px 100px;
overflow: hidden;
}
I'm getting a few problems though. First of all, the image inside the div loads up with opacity at 100% and only goes to 80% after I hover it for the first time. After that, it fades away like it's supposed to but it doesn't show up again when I hover the button.
Any thoughts?
Thanks
Thanks!

How about using fadeTo or fadeToogle ?
Here's a small snippet made using fadeTo: http://jsbin.com/agojux ?
you can have a look at it's source here

Here is your code, but a little bit modified:
JS:
$('#about_hover').width(0);
$('#about').hover(function(){
$('#about_hover').stop(true, true).animate({
width: '150px',
opacity: '0.8',
}, 300);
}, function(){
$('#about_hover').animate({
width: '0px',
opacity: '0',
}, 300);
});​
HTML:
<img src="http://www.placekitten.com/20/20/"><br>
<div id="about_hover"><img src="http://www.placekitten.com/80/80/"></div>

Honestly, it's probably best to use jQuery's on in this situation.. Your code would look something like this:
$("selector").on({
mouseenter: function () {
//fade in goes here
},
mouseleave: function () {
//fade out goes here
}
});
Hover is cool and all, but things can get messy with hover toggling. on makes this a snap. Also for your opacity's, I would probably use a fadeTo instead.
Here is the on documentation.

Fade background image in and out with jQuery?

So far, I've tried a bunch of things to the effect of the following, without success:
<script type="text/javascript">
var x = 0;
while (true) {
/* change background-image of #slide using some variation
of animate or fadeIn/fadeOut with or without setTimeout */
x++;
}
</script>
Any ideas?

You can fade background colors but not background images. The way to work around this is to have your images as <img> tags and hide them by default display:none;. Give your images position:absolute and z-index:-1 so they act like backgrounds and are behind everything else.
Here's a quick example of images fading one after the other.
HTML
<img src=".." />
<img src=".." />
CSS
img{
position:absolute;
z-index:-1;
display:none;
}
jQuery
function test() {
$("img").each(function(index) {
$(this).hide();
$(this).delay(3000* index).fadeIn(3000).fadeOut();
});
}
test();
Check working example at http://jsfiddle.net/RyGKV/

You can fade backgound-images!
in and out!
jQuery:
$('#yourdiv').animate({opacity: 0}, 0).css("background-image", "url(image.jpeg)").animate({opacity: 1}, 2500);
Edit:
This will fade the whole div not onley the background-image.

Although you can't directly fade-in a background-image. You can fade-in a solitary element containing only a background-image...
Here's an example

I got here because I was looking for a solution to fading background images based on a <select> option change. I combined what I had already written with Hussein's jsfiddle above and came up with this jsfiddle.net/v4BMC/.
This initially stacks two identical images on top of each other. When the <select> is changed, the top image's style attribute is removed, the bottom image's src is changed and the top image is faded out to reveal the bottom one. (The top image finishes with a style="display:none" which needs to be removed at the beginning of the operation, otherwise it doesn't work.)
Hope this is useful to someone else and not too irrelevant to be included here!

Here a demo to fade background-image by using the opacity and transition CSS properties with javascript/jQuery:
$( document ).ready(function() {
$( "#textarea" ).focusin(function(){
$( "#blur" ).css({
"opacity" : "1.0",
"transition" : "opacity 600ms ease-in-out"
});
}).focusout(function(){
$( "#blur" ).css({
"opacity" : "0",
"transition" : "opacity 600ms ease-in-out"
});
});
});
body {
background-size: cover;
background-image: url("https://vpsland.com/blog/wp-content/uploads/2016/04/linux-vps-benefits-g.jpg");
}
#textarea {
width: 50%;
}
#blur {
position: absolute;
height: 100%;
width: 100%;
background-size: cover;
background-image: url("https://static1.makeuseofimages.com/wordpress/wp-content/uploads/2014/07/linux-overdrive.jpg?q=50&fit=contain&w=1500&h=750&dpr=1.5");
top: 0;
left: 0;
opacity: 0;
z-index: -1;
}
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<input id="textarea" type="text" placeholder="Focus here to trigger the transition...">
<div id="blur"></div>