jQuery .stop() with animation - javascript

I'm working on a site and I'm trying to make sort of hover see a sample: http://jsfiddle.net/PBbSh/6/ but as you can see does .stop() not work here. Does somebody know why?

Try doing .stop(true, true) instead. The documentation specifies stop as being
.stop( [clearQueue ] [, jumpToEnd ] )
Doing .stop(true, true) will clear the queue and jump the animation to the end. If you just want to clear the animation queue, do .stop(true, false).

Try this instead of stop, use .clearQueue()
$(document).ready(function(){
$(".projectenfoto1").stop().mouseover( projectenfunction(".projectenfoto1"));
$(".projectenfoto2").stop().mouseover( projectenfunction(".projectenfoto2"));
$(".projectenfoto3").stop().mouseover( projectenfunction(".projectenfoto3"));
function projectenfunction(foto1){
$(foto1).stop().mouseover (function(){
$(foto1).animate({
width: "278",
}, 500);
});
$(foto1).clearQueue.mouseout(function(){
$(foto1).animate({
width: "186.75",
}, 500);
});
}
});

try this optimized code:
$(document).ready(function(){
$(".projectenfoto1, .projectenfoto2, .projectenfoto3")
.mouseover(function(){
jQuery(this).stop().animate({
width: "278",
}, 500);
})
.mouseout(function(){
jQuery(this).stop().animate({
width: "186.75",
}, 500);
});
});

Try this (I've cleaned up your HTML, CSS and jQuery a bit for clarity)
HTML:
<div id="fotowrapper">
<div id="fotocontainer">
<div class="projectenfoto1">
</div>
</div>
</div>
CSS:
#fotowrapper {
margin-top: 11px;
}
#fotocontainer {
width: 747px;
height: 523px;
margin-left: auto;
margin-right: auto;
position:relative;
}
.projectenfoto1 {
width: 186.75px;
height: 378px;
background-image: url(http://www.crewtime.nl/kookenleer/Images/Slideshow/foto3.png);
background-repeat: no-repeat;
float:left;
z-index: 4;
position: absolute;
}
jQuery:
$(document).ready(function(){
projectenfunction(".projectenfoto1");
function projectenfunction(foto1){
$(foto1).mouseover (function(){
$(foto1).stop().animate({
width: "278"
}, 500);
});
$(foto1).stop().mouseout(function(){
$(foto1).stop().animate({
width: "186.75"
}, 500);
});
}
});
updated fiddle: http://jsfiddle.net/PBbSh/10/

Related

SetTimeout does not work correctly in jQuery

This is my code.
I want the images get larger after one second if I hold the mouse on each of them but there is no response from the setTimeout. Even when I put an alert() function at the beginning of the menuChanging() function, it runs but the rest of my code does not execute (it runs immediately, not after one second).
You are invoking the function menuChanging immediately on mouseover, instead you need to pass a function reference to setTimeout
$(function() {
$(".hormenu > div").hover(function() {
$(this).data('hoverTimer', setTimeout(menuChanging.bind(this), 1000));
}, function() {
var $this = $(this);
//if you move out before 1s then clear the timer
clearTimeout($this.data('hoverTimer'));
//when the mouse is moved out restore to initial state if required
if ($this.hasClass('current')) {
$this.toggleClass("current other").animate({
width: "100px",
opacity: "0.5"
}, 750, 'easeOutBounce');
}
});
});
function menuChanging() {
var duration = 750;
$(".hormenu > .current").not(this).toggleClass("current other").animate({
width: "100px",
opacity: "0.5"
}, duration, 'easeOutBounce');
$(this).removeClass("other").addClass("current").animate({
width: "600px",
opacity: "1"
}, duration, 'easeOutBounce');
}
.hormenu {
height: 500px;
width: 1800px;
}
img {
height: 100%;
width: 100%;
}
.hormenu div {
width: 100px;
overflow: hidden;
display: block;
float: left;
height: 100%;
}
.other {
opacity: 0.5;
}
img {
width: 600px;
}
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="//code.jquery.com/ui/1.11.1/jquery-ui.js"></script>
<div class="hormenu">
<div class="current">
<img src="http://img0.mxstatic.com/wallpapers/b844e6ef0e3320bc945a9b5b1cd196f9_large.jpeg" alt="" />
</div>
<div class="other">
<img src="http://img0.mxstatic.com/wallpapers/20c41d877dfbed0e52947f51846df781_large.jpeg" alt="" />
</div>
<div class="other">
<img src="http://img0.mxstatic.com/wallpapers/b844e6ef0e3320bc945a9b5b1cd196f9_large.jpeg" alt="" />
</div>
</div>
Here you can find a solution to your issue.
$(function(){
$(".hormenu div").mouseover(
function()
{
setTimeout(menuChanging($(this)),1000);
}
);
});
function menuChanging(div) {
return function(){
var duration = 750 ;
if (!div.hasClass("current")) {
$(".current").removeClass("current").addClass("other").animate({
width: "100px",
opacity: "0.5"
}, duration, 'easeOutBounce');
}
div.removeClass("other").addClass("current").animate({
width: "600px",
opacity: "1"
}, duration, 'easeOutBounce');
}
}
FIDDLE
You were calling the function and not passing it to setTimeout. I also changed some things to retrieve easily the div. The new function returns a function to call and this new function can access the first one's parameter.

Count back percentage using JQuery

I have the code below where I'd like to the numbers count back to 0% once hover the object out. Also I can't figure our how to make the value disappear again as it was on load. Could you please help me solve this.
Thanks in advance.
HTML
<div class="container">
<div class="fill" data-width="80%"></div>
</div>
<div class="container">
<div class="fill" data-width="50%"></div>
</div>
CSS
.container {
position: relative;
width: 300px;
height: 30px;
background-color: blue;
margin: 10px auto;
}
.fill {
height: 100%;
width: 0;
background-color: red;
line-height: 30px;
text-align: left;
z-index: 1;
text-align: right;
}
JQuery
$(function() {
$('.container').hover( function(){
var width=$(this).find(".fill").data('width');
$(this).find(".fill").animate({ width: width }, {
duration:800,
step: function(now, fx) {
$(this).html(Math.round(now) + '%');
}
});
},
function(){
$(this).find(".fill").animate({ "width": "0px" }, 800);
});
});
jsFiddle http://jsfiddle.net/zp8pe069/
jsBin demo
CSS: set overflow: hidden to .fill to prevent the text being visible after the animation ends.
HTML: remove % from the data attribute
JS and here you go. all you need:
$('.container').hover(function( e ){
var $fill = $(this).find(".fill");
var width = $fill.data('width');
$fill.stop().animate({width: e.type=="mouseenter" ? width+"%" : "0%" }, {
duration : 800,
step : function(now) {
$(this).html(Math.round(now) + '%') ;
}
});
});
Note also the use of the .stop() method, if you hover multiple time hysterically :) it'll prevent endless animations.

Stop animation on .siblings()

I'm creating a page when you hover a div. That div will grow in size (width) and the other divs (siblings) will be smaller in size (width).
I use a mouseenter and a mouseleave. But I can't get the .stop() function working.
When you hover one and less than a sec another one. The old one will not stop.
Live example:
http://jsfiddle.net/5kyw9ya7/7/
Code:
Html:
<div class="one">1</div>
<div class="two">2</div>
<div class="three">3</div>
<div class="four">4</div>
<div class="five">5</div>
Css:
body, html {
margin:0px;
overflow:hidden;
}
div {
float:left;
height:100vh;
top:0;
bottom:0;
}
.one {
background-color:orange;
}
.two {
background-color:yellow;
}
.three {
background-color:red;
}
.four {
background-color:purple;
}
.five {
background-color:green;
}
Jquery:
var breedte = $(window).width() / 5;
$("div").css("width", breedte);
$("div").stop()
.mouseenter(function () {
$(this).animate({
width: "+=100"
});
$(this).siblings().animate({
width: "-=25",
});
$(this).siblings().css(
"backgroundColor", "grey");
})
.stop().mouseleave(function () {
$(this).animate({
width: "-=100"
});
$(this).siblings().animate({
width: "+=25"
});
$(this).siblings().css(
"backgroundColor", "");
});
It works better if you put .stop() in the event handlers. You should also call it as .stop(true,true) in order for it to finish the animation. Otherwise, the sizes get all messed up. See the documentation.
var breedte = $(window).width() / 5;
$("div").css("width", breedte);
$("div").stop()
.mouseenter(function () {
$(this).stop(true,true).animate({
width: "+=100"
});
$(this).siblings().stop(true,true).animate({
width: "-=25",
});
$(this).siblings().css(
"backgroundColor", "grey");
})
.stop().mouseleave(function () {
$(this).stop(true,true).animate({
width: "-=100"
});
$(this).siblings().stop(true,true).animate({
width: "+=25"
});
$(this).siblings().css(
"backgroundColor", "");
});
Updated fiddle: http://jsfiddle.net/5kyw9ya7/10/

Toggle Div on click

I want to modify this code for click event. But I am not able to do so. My requirement is to slide the panel on click (not hover) and again rollback on click (and not mouse out).
HTML
<div id="sidePanel">
<div id="panelContent">
<iframe src="//www.facebook.com/plugins/likebox.php?href=http%3A%2F%2Fwww.facebook.com%2FWebsTutorial&width=200&height=258&colorscheme=light&show_faces=true&border_color&stream=false&header=false&appId=253401284678598" scrolling="no" frameborder="0" style="border:none; overflow:hidden; width:200px; height:258px;" allowTransparency="true"></iframe>
</div>
<div id="panelHandle"><p>Facebook</p></div>
</div>
CSS
/* ===== Primary Styles ========================================================
Author: NTechi | WebsTutorial
========================================================================== */
body{
font-family:Arial;
}
#sidePanel{
width:245px;
position:fixed;
left:-202px;
top:15%;
}
#panelHandle{
background-image: -webkit-linear-gradient(top,#333,#222);
background-image: -moz-linear-gradient(center top , #333333, #222222);
background-image: -o-linear-gradient(center top , #333333, #222222);
background-image: -ms-linear-gradient(center top , #333333, #222222);
background-image:linear-gradient(center top , #333333, #222222);
height:150px;
width:40px;
border-radius:0 5px 5px 0;
float:left;
cursor:pointer;
}
#panelContent{
float:left;
border:1px solid #333333;
width:200px;
height:300px;
background-color:#EEEEEE;
}
#panelHandle p {
-moz-transform: rotate(90deg);
-webkit-transform: rotate(90deg);
color: #FFFFFF;
font-size: 24px;
font-weight: bold;
left: -4px;
margin: 0;
padding: 0;
position: relative;
top: 26px;
}
JavaScript
jQuery(function($) {
$(document).ready(function() {
$('#panelHandle').hover(function() {
$('#sidePanel').stop(true, false).animate({
'left': '0px'
}, 900);
}, function() {
jQuery.noConflict();
});
jQuery('#sidePanel').hover(function() {
// Do nothing
}, function() {
jQuery.noConflict();
jQuery('#sidePanel').animate({
left: '-201px'
}, 800);
});
});
});
Any help would be really helpful.
Thanks in advance!
Use Toggle API Instead http://api.jquery.com/toggle-event/
$('#panelHandle').toggle(function() {
$('#sidePanel').stop(true, false).animate({
'left': '0px'
}, 900);
}, function() {
jQuery('#sidePanel').animate({
left: '-201px'
}, 800);
});
Fiddle: http://jsfiddle.net/GPdFk/4812/
Simple way to do this. Change the hover event to toggle event.
Using your jsfiddle it would be something like this:
$(document).ready(function() {
$('#panelHandle').toggle(function() {
$('#sidePanel').stop(true, false).animate({
'left': '0px'
}, 900);
}, function() {
jQuery.noConflict();
jQuery('#sidePanel').animate({
left: '-201px'
}, 800);
});
});
It can easily be done using .toggle()
Here is the updated code:
jQuery(function($) {
$('#panelHandle').toggle(function() {
$('#sidePanel').animate({
'left': '0px'
}, 900);
}, function() {
$('#sidePanel').animate({
'left': '-202px'
}, 900);
});
});

How to command if ( ..) don't executive setTimeout()

This Demo,
After landing page it will show btn2(green area), then user have 2 option:
1. user do nothing - setTimeout()
2. user hover to btn2- show btn3(blue).
I stuck in 2. after hover to btn2 and btn3 be show. btn1(red) still fadeIn how to cancel it?
Any suggestion will be appreciated.
<div class="btn btn1"></div>
<div class="btn btn2"></div>
<div class="btn btn3"></div>
.btn{
width: 200px;
position: absolute;
}
.btn1{
background-color: red;
height: 100px;
width: 100px;
}
.btn2{
background-color: green;
height: 200px;
opacity: 0.3;
display: none;
}
.btn3{
background-color: blue;
height: 200px;
opacity: 0.3;
display: none;
}
jQuery
$(function(){
function navctr(){
//landing
$('.btn1').hide();
$('.btn2').show();
setTimeout(function(){
$('.btn2').fadeOut(50);
$('.btn1').fadeIn(50);
}, 2250);
//after click
$('.btn1').click(function(){
$('.btn1').fadeOut(100);
$('.btn2').delay(100).fadeIn(50);
});
//both
$('.btn2').hover(function(){
$('.btn2').hide();
$('.btn3').fadeIn(100);
});
$('.btn3').mouseleave(function(){
$('.btn3').fadeOut(50);
$('.btn1').fadeIn(100);
});
};
navctr();
});
Use the method clearTimeout() : documentation it will remove a timeout previously set on your document.
With your code it would be something like this :
$(function(){
function navctr(){
var myTimeout;
//landing
$('.btn1').hide();
$('.btn2').show();
myTimeout = setTimeout(function(){
$('.btn2').fadeOut(50);
$('.btn1').fadeIn(50);
}, 2250);
//after click
$('.btn1').click(function(){
$('.btn1').fadeOut(100);
$('.btn2').delay(100).fadeIn(50);
});
//both
$('.btn2').hover(function(){
$('.btn2').hide();
$('.btn3').fadeIn(100);
clearTimeout(myTimeout); // remove the setTimeout
});
$('.btn3').mouseleave(function(){
$('.btn3').fadeOut(50);
$('.btn1').fadeIn(100);
});
};
navctr();
});

Categories