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/
Related
How to use .toggle() method but not for show and hide purposes?
For example, when I click on a certain div I would like to animate it's position
$(div).animate({"left":"+=50px"}); and then on the second click to return the div on the same position $(div).animate({"left":"-=50px"}).
I know there is other solution but I would like to achieve this with .toggle() without hiding an showing the div. Any ideas?
$("#myDiv").toggle(function() {
$(this).stop().animate({
left:"+=50"
}, 500);
}, function() {
$(this).stop().animate({
left:"-=50"
}, 500);
});
#myDiv{
background-color:black;
width:100px;
height:100px;
position:absolute;
left:50px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.0/jquery.min.js"></script>
<div id="myDiv"></div>
hope this answer your question. However, jQuery 1.9 and newer do not allow this feature.
there is no toggle function using click since 1.9 . But you can still doing this using two ways:
for more explaination
$(function(){
//basic method
var clicked = false;
$('#mydiv1').click(function(){
if(clicked){
clicked = false;
$(this).animate({"left":"+=50px"});
}else{
clicked=true;
$(this).animate({"left":"-=50px"});
}
});
//create new function like old built-in function
$.fn.clickToggle = function(func1, func2) {
var funcs = [func1, func2];
this.data('toggleclicked', 0);
this.click(function() {
var data = $(this).data();
var tc = data.toggleclicked;
$.proxy(funcs[tc], this)();
data.toggleclicked = (tc + 1) % 2;
});
return this;
};
$('#mydiv2').clickToggle(function(){
$(this).animate({"left":"+=50px"});
}, function(){
$(this).animate({"left":"-=50px"});
});
});
#mydiv1{
background-color: yellow;
width: 50px;
height: 50px;
position: absolute;
left: 100px;
}
#mydiv2{
background-color: blue;
width: 50px;
height: 50px;
position: absolute;
left: 200px;
top: 100px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="container">
<div id="mydiv1"></div>
<div id="mydiv2"></div>
</div>
I need a help with this auto-scrolling. Please help me to pause the scrolling when Hovering the Mouse over it. Thank you.
/*scroll view*/
$('.scroll').wrap('<div class="scroll-group"></div>');
$('.scroll').css({
'overflow': 'hidden',
height: 'auto'
});
$('.scroll-group').append($('.scroll').clone());
$('.scroll-group').wrap('<div class="scroll-wrap"></div>');
$('.scroll-wrap').css({
'overflow': 'hidden'
});
/*animate*/
var targetY = $('.scroll').eq(0).outerHeight();
var scroll = function(resetY) {
//animate 기본 동작 변형 "swing" -> "linear"
$('.scroll-group').animate({
top: targetY * -1 + 'px'
}, 6000, "linear", function() {
$('.scroll-group').css({
top: 0
});
scroll();
});
}
scroll();
.scroll-wrap,
.scroll {
width: 100px;
height: 102px;
overflow-y: scroll;
margin: 0;
position: relative
}
.scroll-group {
position: absolute;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<p class="scroll">content-1<br />content-2<br />content-3<br />content-4<br />content-5<br />content-6<br />content-7<br />content-8<br />content-9<br />content-10<br /></p>
Please use this fiddle.
I have added hover and mouseleave function to pause and resume the scrolling respectively.
/*scroll view*/
$('.scroll').wrap('<div class="scroll-group"></div>');
$('.scroll').css({'overflow':'hidden',height:'auto'});
$('.scroll-group').append($('.scroll').clone());
$('.scroll-group').wrap('<div class="scroll-wrap"></div>');
$('.scroll-wrap').css({'overflow':'hidden'});
/*animate*/
var targetY = $('.scroll').eq(0).outerHeight();
var scroll = function(resetY){
//animate 기본 동작 변형 "swing" -> "linear"
$('.scroll-group').animate({top:targetY*-1+'px'},6000,"linear", function(){
$('.scroll-group').css({top:0});
scroll();
});
$('.scroll-group').hover(function() { //mouseenter
$('.scroll-group').stop(true, false);
});
$(".scroll-group").mouseleave(function(){
scroll();
});
}
scroll();
.scroll-wrap,.scroll {width:100px; height:102px;overflow-y:scroll; margin:0 ; position:relative }
.scroll-group {position:absolute;}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<p class="scroll">content-1<br />content-2<br />content-3<br />content-4<br />content-5<br />content-6<br />content-7<br />content-8<br />content-9<br />content-10<br /></p>
Each of these 3 divs travels 500px over 6000ms. After 4000ms, I want:
the red div to fade out over its last 2000ms
the green dive to fade in over 2000ms
the green div to start its journey of 500px
all simultaneously.
Then, after 8000ms, when the green div is 4000ms into its journey, I want:
the green div to fade out over its last 2000ms
the yellow dive to fade in over 2000ms
the yellow div to start its journey of 500px
all simultaneously.
Then, at 12000ms, when the yellow div is 4000ms into its journey, I want it to fade out over its last 2000ms of its journey.
It's about having total control with overlapping animations. I tried queue() and dequeue(), queue: false, setTimeout... I can't make heads or tails of it. How do I do this?
<!DOCTYPE html>
<html>
<head>
<script src="http://code.jquery.com/jquery-latest.min.js"></script>
<style>
div {
width:50px;
height:50px;
position:absolute;
left:0;
}
#div1 {background:red;top:0;}
#div2 {background:green;top:55px;}
#div3 {background:yellow;top:110px;}
</style>
</head>
<body>
<script>
$(document).ready(function(){
$("#div1").animate({left: "500px"}, 6000);
$("#div2").delay(4000).animate({left: "500px"}, 6000);
$("#div3").delay(8000).animate({left: "500px"}, 6000);
});
</script>
<div id="div1"></div>
<div id="div2"></div>
<div id="div3"></div>
</body>
</html>
You can use css transition and start , step options of .animate()
<!DOCTYPE html>
<html>
<head>
<script src="http://code.jquery.com/jquery-latest.min.js"></script>
<style>
div {
width: 50px;
height: 50px;
position: absolute;
left: 0;
transition: opacity 2.5s ease;
}
#div1 {
background: red;
top: 0;
}
#div2 {
background: green;
top: 55px;
opacity:0;
}
#div3 {
background: yellow;
top: 110px;
opacity:0;
}
</style>
</head>
<body>
<script>
$(document).ready(function() {
function step(now, fx) {
var n = Math.round(now)
if (n === 250 || n === 251) {
$(this).css("opacity", 0)
}
}
function start() {
$(this).css("opacity", 1)
}
$("#div1").animate({
left: "500px"
}, {
duration: 6000,
step:step
});
$("#div2").delay(4000).animate({
left: "500px"
}, {
duration: 6000,
start:start,
step:step
});
$("#div3").delay(8000).animate({
left: "500px"
}, {
duration: 6000,
start:start,
step:step
});
});
</script>
<div id="div1"></div>
<div id="div2"></div>
<div id="div3"></div>
</body>
</html>
Is this what you are trying to implement?
idArray = ['div1', 'div2', 'div3', 'div4'];
div = {};
//Create a flag for every item in list.
$(idArray).each(function(i, val) {
div['Action' + i] = false;
});
duration = 6000; //duration of each animation
overlap = 4000; //the time when overlap happens
fadeAt = 2000; //speed at which element appear/disappear
iLikeToMoveIt(0); //initialize animation
function iLikeToMoveIt(i) {
$now = $("#" + idArray[i]); //animation element
$next = $("#" + idArray[++i]); //next element
$now.fadeIn(fadeAt).animate({
left: "500px"
}, {
duration: 6000,
queue: false,
progress: function(animation, progress, remainingMs) {
//check if flag is not set
if (!div['Action' + i] && remainingMs < fadeAt) {
//set the flag
div['Action' + i] = true;
$(this).fadeOut(fadeAt);
if ($next.length) {
//call function for next div
iLikeToMoveIt(i);
}
}
}
});
}
div {
width: 50px;
height: 50px;
position: absolute;
left: 0;
}
.hide {
display: none;
}
#div1 {
background: red;
top: 0;
}
#div2 {
background: green;
top: 55px;
}
#div3 {
background: yellow;
top: 110px;
}
#div4 {
background: blue;
top: 165px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div id="div1"></div>
<div id="div2" class="hide"></div>
<div id="div3" class="hide"></div>
<div id="div4" class="hide"></div>
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);
});
});
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/