Develop Reference

Jquery - How to reset Animation in the middle of it's current animation?

I'm working on my first JQuery project, and i'm trying to figure out how to reset my animation if the user decides to mouseleave the .container. Right now if the user mouseleaves the .container the animation will continue through as if they are still inside the .container. I would like it to revert it's animation in reverse if the user decides to leave the container in mid animation. How can i make this possible?
$( document ).ready(function() {
$('#facial span').fadeOut(0);
$('.container').mouseenter(function(){
// When mouse enters the .container, #facial slides to center of .container.
$('#facial').animate({right: '25%'})
// After #facial slides to center it delays for 500ms.
.delay(500)
// After #facial delays it expands it's width to 100% of .container.
.animate({right: 0, width: '100%'});
// show the span link at bottom as a H2 with center aligned.
$('span').fadeIn(600);
});
$('.container').mouseleave(function(){
// Mouse leaves .container, and span fades out slowly.
// $('span').css('display','none');
$('span').fadeOut(500);
// Mouse leaves the .container, #facial shrinks it's width to 50%.
// #facial slides back to right of .container.
$('#facial').animate({right: 0, width: '50%'});
});
});
Here is my Demo

You can use jQuery's stop(true) method which cancels all current and queued animations.
See this update jsFiddle

Try using .stop(true, true, true)
var $view = $('View');
$( document ).ready(function() {
$('#facial span').fadeOut(0);
$('.container').mouseenter(function(){
// When mouse enters the .container, #facial slides to center of .container.
$('#facial').animate({right: '25%'})
// After #facial slides to center it delays for 500ms.
.delay(500)
// After #facial delays it expands it's width to 100% of .container.
.animate({right: 0, width: '100%'});
// show the span link at bottom as a H2 with center aligned.
$('span').fadeIn(600);
});
$('.container').mouseleave(function(){
// Mouse leaves .container, and span fades out slowly.
// $('span').css('display','none');
$('span').stop(true, true, true).fadeOut(500);
// Mouse leaves the .container, #facial shrinks it's width to 50%.
// #facial slides back to right of .container.
$('#facial').stop(true, true, true).animate({right: 0, width: '50%'});
});
});
jsfiddle https://jsfiddle.net/sy4pv8z3/57/

why does part of the content scale on this slider

I have used THIS tutorial to create a full-screen version for a website I am working on.
As you may have noticed I have succeeded in making most of the changes I needed.
http://coolcarousels.frebsite.nl/c/68/
But I am unable to figure out why the cans that shrink and grow every time the slides are clicked and made active.
JSBin
I have a feeling it has something to do with the Slides changing their width when going from active to smaller slides, But I do not understand why should the content grow/shrink with it.
// resize currentslide to small version
currentSlide.stop().animate({
width: _width * 0.065
});
Is there anyone that can help me understand why this is happening?
All I want is for the click to reveal the slide and the cans to stay the size they are suppose to be. Just like the original tutorial a clean reveal to the content.

The reason the cans expand is not a JavaScript issue, its because the CSS for the can is width:100% when its a small slider and when the new slide is clicked, the active slide goes from 60% to 10% and therefore the can takes up 100% of it.
.slide .can {
position: absolute;
width: 150%;
left: -56%;
bottom: 0;
right:auto;
}
The easiest solution would be to turn the values into pixels so that it stays the size it is while transitioning. But that perhaps complicates responsive behaviour.

jquery slide down effect - without moving inner contents

I am trying to achieve a simple slide up/down effect similar to the 'more' link on www.bbc.co.uk
YOu can see that the inner contents do not move up and down, instead it is like a screen is being pulled over them.
Using jquery slideUp slideDown does not achieve this, instead the whole div is moved up and down so the text looks like it moves.
How can a similar effect be achieved using jquery?

Just put your sliding div between the menu and the content:
<div id="menu">Menu example. Click here!</div>
<div id="slide">Whoa! sliding div<br>See how it moves the content down</div>
<div>Content here</div>
See fiddle: http://jsfiddle.net/2hZme/1/

slideUp/slideDown uses the top position when it animates, when you want to use the height. So I'd suggest to animate it manually:
// Initial variables
var panel = $('#panel');
var panelHeight = panel.height();
// Set the height to 0
panel.height('0px');
// Animate it to its initial size
$('a').click(function() {
$('#panel').animate({'height' : panelHeight});
});
... and of course the CSS:
#panel {
overflow: hidden;
height: 300px; /* or whatever */
}
Fiddle: http://jsfiddle.net/3fsQr/

Slide Background with AnythingSlider

I need to slide a background when clicking the "next" arrow, and the "previous" arrow - right now the background is in the #container element - However, that doesnt work - I've tried putting the background on the ul#slider element - But that doesnt work either...
What i need is that the background will be slider as much as the liinside the slider...
Any suggestions on how to do that ?
You can see the project here: http://www.i-creative.dk/Slider/
thx

I've built something like what you're asking for, and it's a total pain.
The problem is, you're talking about having a different background image, the size of the page, for EVERY slide.
2 options are:
1: Have one BIG background image, with all the background aligned horizontally, and animate the css background-position when you change a div, to keep things matching. This ahs the advanatage that only one image needs to be downloaded, but it will be big.
Problems are: you see all the other images if you jump multiple steps at once;
it requires that you use a fixed width;
it's a pain if you want to change the background for just one slide;
Preload the background for the next slide on a div which is a sibling of container but has a higher z-index. Use jquery to slide this over the existing background, from the appropriate side.
The good thing about this method is that you can use css to make the background image always take up the full-width of the screen, or use a bigger imager and have it centred. See here: http://cksk.com for an example.
Long story short, you won't get this working with an off-the-shelf solution, you'll need to get your hands dirty.
Also, you'll need to spend a hell of a lot of time on optimisation.

Try this css...
#slider {
width: 472px; /* divided the width of the background image by 4 (# of panels) */
height: 570px;
list-style: none;
/* start background after the initial cloned panel: 472px to match panel width */
background: transparent url(../images/background.png) 472px 0 repeat-x;
}
/* This makes sure the last cloned panel background matches the first panel */
ul#slider li.clone {
background: transparent url(../images/background.png) 0 0 repeat-x !important;
}
/* Make the background visible */
div.anythingSlider .anythingWindow {
overflow: visible !important;
}
The only problem is that the width of the UL is limited, so when you get to the last panel, the background ends, but reappears once you hit the right arrow.

jQuery Mouseenter and mouseleave actions

I am using the following jQuery script:
$("#divid").mouseenter(function() {
$('#divid').show(1000);
}).mouseleave(function() {
$('#divid').hide(1000);
});
$("#hldiv").mouseenter(function() {
$('#divid').show(1000);
}).mouseleave(function() {
$('#divid').hide(1000);
});
As you can see, when the mouse hovers over a hyperlink called #hldiv, the #divid should be shown. The main goal is to keep the DIV shown if the mouse is over the DIV - but the #divid should not be visible initially.
If the mouse moves over the hyperlink, the DIV should appear, and when the mouse then moves over the DIV, it should stay until the mouse leaves.
The problem is that with my current code, when the user moves over the hyperlink and then out - the DIV appears/disappears correctly, but when the user moves out of the hyperlink and over the DIV itself, the DIV also disappears.
How should I fix this?

Why don't you add a container and do:
<div id='container'>
<a ID="hlDiv">hlink</a>
<div ID="divId">Test Test Test</div>
</div>
$(document).ready(function() {
$("#hlDiv").hover(function() {
$('#divId').show(1000);
})
$('#container').mouseleave(function(){
$('#divId').hide(1000);
});
});
fiddle here: http://jsfiddle.net/w68YX/8/

If I understood right, rewriting
$("#divid").mouseenter(function() {
$('#divid').stop(true);
$('#divid').show(1000);
}).mouseleave(function() {
$('#divid').hide(1000);
});
Might help, since it stops the current animation (fading out) and fades it back in (if it has already turned a bit transparent).
However this depends on your HTML, and might not work in your case, so please post the structure also.

I am very late to this party - but there is a far better way to do this, so I want to add it for the sake of future browsers. You don't need jQuery for this effect at all.
First, wrap the two items in a container (here I'm using a div with class container), and apply a class to the item you want to appear/disappear on hove (here I'm using the show-on-hover class on the #divId element)
<div class="container">
<a id="hlDiv" href="...">link text</a>
<div class="show-on-hover" id="divId">popup stuff</div>
</div>
Next, set up your CSS as follows:
.container > .show-on-hover { display: none; }
.container:hover > .show-on-hover { display: block; }
#divId { /* whatever styles you want */ }
The effect is that the hover is now controlled entirely by CSS - but, it doesn't have the 1s transition you originally had. This is a little more complicated (and currently doesn't work in IE - but will be supported as of IE10).
Simply change the CSS as follows:
.container { position: relative; }
.container > .show-on-hover { opacity: 0.0; position: absolute; }
.container:hover > .show-on-hover { opacity: 1.0; }
.show-on-hover {
-webkit-transition: opacity 1s; /* Chrome / Safari */
-moz-transition: opacity 1s; /* Firefox */
-o-transition: opacity 1s; /* Opera */
}
The relative positioning on the .container means that the container sets its own bounding boxes for its child elements and their positioning. This means that when you then set the > .show-on-hover styling to position: absolute;, it will still be constrained to its parent (if you set left: 0; as an example, it will move to the left edge of the .container, rather than the screen).
The opacity toggle now simply makes the absolutely positioned item show/disappear wherever you've placed it (and you would update the CSS to put it exactly where you want, relative to the hyperlink). Because we're no longer using display: none - the DIV will always take up space on the screen - even when hidden (which is probably not what you want).
Finally - the last block, which sets transitions, tells modern browsers that whenever the opacity changes on elements of class .show-on-hover, make that change happen as a tween over 1s of duration.
Here is a jsFiddle showing the transitions: http://jsfiddle.net/TroyAlford/nHrXK/2
And here is a jsFiddle showing just the toggle: http://jsfiddle.net/TroyAlford/nHrXK/3/