I am trying to figure out how .stop() and clearQueue() work.
Here is my sample code in jsfiddle: http://jsfiddle.net/PsTQv/1/
You will see the animation is queuing if hove over several blocks.
To work around with this, I tried to use stop() and clearQueue.Simple add stop after hide() or show() or both won't work.The behaviors like:
1. .stop().hide() : text disappears at last;
2. .stop.show(): text is alway there, won't be hidden any more
3. add both: Same as only add to show()
4. add .clearQueue().stop() in the beginning: text disappears at last, like .stop().hide()
I want to understand what the differences between clearQueue and stop to explain the behaviors above.Also I want to figure out how to achieve the animation without queueing in this example, that is, hover over the block and the text shows up in the slide effect.
Thanks
You need to clear the animation queue in the callback function that executes when the slide animation is done:
$('.block').hover(function(){
$('section').hide('fast');
//$('section').stop().show('slide',{direction:'left'},1000);
$('section').show('slide',{direction:'left'},1000,function(){$(this).clearQueue()});
},function(){});
jsFiddle
var inAnimation = new Array();
$("div").hover(function(){
if (!inAnimation[$("div").index(this)] ) {
$(this).animate({ width: "200px" });
}
}, function() {
inAnimation[$("div").index(this)] = true;
$(this).animate({ width: "100px" }, "normal", "linear", function() {
inAnimation[$("div").index(this)] = false;
})
});
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>clearQueue demo</title>
<style>
div {
margin: 3px;
width: 40px;
height: 40px;
position: absolute;
left: 0px;
top: 30px;
background: green;
display: none;
}
div.newcolor {
background: blue;
}
</style>
<script src="//code.jquery.com/jquery-1.10.2.js"></script>
</head>
<body>
<button id="start">Start</button>
<button id="stop">Stop</button>
<div></div>
<script>
$( "#start" ).click(function() {
var myDiv = $( "div" );
myDiv.show( "slow" );
myDiv.animate({
left:"+=200"
}, 5000 );
myDiv.queue(function() {
var that = $( this );
that.addClass( "newcolor" );
that.dequeue();
});
myDiv.animate({
left:"-=200"
}, 1500 );
myDiv.queue(function() {
var that = $( this );
that.removeClass( "newcolor" );
that.dequeue();
});
myDiv.slideUp();
});
$( "#stop" ).click(function() {
var myDiv = $( "div" );
myDiv.clearQueue();
myDiv.stop();
});
</script>
</body>
</html>
Related
I'm trying to show and hide elements on my page based on clicks on an image code goes as follows.
jQuery(function($) {
jQuery(".elementor-widget-image").click(function() {
var contentPanelId = jQuery(this).attr("id");
switch (contentPanelId) {
case "capacitacion":
console.log(contentPanelId+' has been clicked');
$( "#capacitacion-content" ).show( "slow");
break;
case "practicas":
console.log(contentPanelId+' has been clicked');
$( "#capacitacion-content" ).hide( "slow");
$( "#bpm-content" ).show( "slow");
break;
}
});
});
The problem is when i press the first image comes and goes normally but the second image don't show at all, is it a logic problem? cause i clearly telling the system th hide one and show the other.
replce
$( "#capacitacion-content" ).hide( "slow");
$( "#bpm-content" ).show( "slow");
by
$("#capacitacionContent" ).hide();
$("#bpmContent" ).show();
and try
jQuery(function($) {
$("#capacitacion-content").hide();
$("#bpm-content").hide();
jQuery(".elementor-widget-image").click(function() {
var contentPanelId = jQuery(this).attr("id");
switch (contentPanelId) {
case "capacitacion":
console.log(contentPanelId + ' has been clicked');
$("#bpm-content").hide("slow");
$("#capacitacion-content").show("slow");
break;
case "practicas":
console.log(contentPanelId + ' has been clicked');
$("#capacitacion-content").hide("slow");
$("#bpm-content").show("slow");
break;
}
});
});
.elementor-widget-image {
cursor: pointer;
}
#capacitacion-content {
background: red;
height: 100px;
width: 100px;
}
#bpm-content {
background: green;
height: 100px;
width: 100px;
}
#practicas {
margin-top: 10px
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="elementor-widget-image" id="capacitacion">Click to test capacitacion </div>
<div class="elementor-widget-image" id="practicas">Click to test practicas</div>
<div id="capacitacion-content"> </div>
<div id="bpm-content"></div>
When I use my script
$(document).ready(function(){
console.log("it started");
swapsies();
});
function swapsies() {
$('.lang').on('click', function(){
console.log("here");
//.when(
$.when(
$(this).animate({ "margin-left": "-=10" }, 500),
$('.active').animate({ "margin-left": "+=10" }, 500)
).done(function(){
console.log("done");
});
});
}
Both elements, this and active supposed to move and switch places, but only active element is moving! I dont know, maybe it is because of the wait function
Here is my html so you could run this:
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<link rel="stylesheet" type="text/css" href="style.css">
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
<script type="text/javascript" src="script.js" ></script>
<title>Test swapsies</title>
</head>
<body>
<div id="fied">
<button type="button" id="bb">Click Me!</button>
<div id="swapthis">
<ul>
<li class="active lang">En</li>
<li class="lang">Fr</li>
<li class="lang">Es</li>
</ul>
</div>
</div>
</body>
</html>
And css:
li{
display:inline;
background-color: aquamarine;
font-size: 24px;
}
.active{
background-color: blanchedalmond;
}
Please help me figure out how to make both elements to move - the one that was clicked on and the one that uses .active class.
you should make the element you click moving more left.
instead of "-=10"
$(this).animate({ "margin-left": "-=10" }, 500)
using "-=20"
$(this).animate({ "margin-left": "-=20" }, 500)
I've test your code on jsfiddle.
The fact the element you click is not moving showing exactly the code is working.
Since you're asking the element on its left moving right 10 px (which makes itself moves right 10px) and then asking the element moving left 10 px, makes it not moving at all.
but since you might not want the element on its right moves too, you should also handling those elements' margin
I've modify your code like this:
$('.lang').on('click', function(){
var dist = 10;
console.log("here");
//.when(
$.when(
$(this).animate({ "margin-left": "-="+dist*2 }, 500),
$(this).next().animate({ "margin-left": "+="+dist }, 500),
$('.active').animate({ "margin-left": "+="+dist }, 500)
).done(function(){
console.log("done");
});
});
increasing dist if you want to move more.
$(document).ready(function() {
console.log("it started");
swapsies();
});
function swapsies() {
$(".lang").on("click", function(e) {
$(e.target)
.parent()
.siblings()
.removeClass("active")
.animate({"left":"0"}, -500)
.end()
.addClass("active")
.animate({"margin-left": "-=10", "left":"0px"}, 500, function() {
$(this).prependTo($(this).parent())
.animate({"margin-left": "+=10", "left":"-=10"}, 500, function() {
$(this).siblings().animate({"left": "0"}, 500)
.promise().then(function() {
console.log("done")
})
})
});
});
}
li {
position: relative;
display: inline;
background-color: aquamarine;
font-size: 24px;
padding: calc(0%);
margin-left: calc(0%);
margin-right: calc(0%);
width: calc(1%);
}
.active {
background-color: blanchedalmond;
left:-10px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js">
</script>
<div id="fied">
<button type="button" id="bb">Click Me!</button>
<div id="swapthis">
<ul>
<li class="active lang">En
</li>
<li class="lang">Fr
</li>
<li class="lang">Es
</li>
</ul>
</div>
</div>
I want to leave a colored div trail without generating divs when the page loads. I want them to be appended when the mouse is over the parent div and position them where the mouse is within it.
EDIT: I think I need to be more precise so I posted the code that I want to rewrite. I want it to do the same thing without generating the divs that become colored on mouseover when the page loads but to create a colored div when the mouse is over $(".container") at the current position of the mouse.
THANKS!
Mention: the script generates lots of divs - it might take a while for the page to load.
$(document).ready( function() {
var csize = $(".container").width() * $(".container").height();
var space = $(window).width() * $(window).height();
while ( csize * $(".container").length < space) {
$("#space").append("<div class='container'></div>");
};
$(document).on("mousemove", function() {
window.color = Math.floor(Math.random()*16777215).toString(16);
});
$(".container").on("mouseover", function() {
$(this).css("background-color", "#" + window.color);
});
});
#space{
width: auto;
height: auto;
}
.container {
width: 15px;
height: 15px;
display: inline-block;
float: left;
border: none;
}
<!DOCTYPE html>
<html>
<head>
<title> JqPractice</title>
<link rel="stylesheet" type="text/css" href="reset.css">
<link rel="stylesheet" type="text/css" href="style.css">
<script src="jq.js" type="text/javascript"></script>
<script src="sv2.js" type="text/javascript"></script>
</head>
<body>
<div id="space">
<div class="container">
</div>
</div>
</body>
<footer>
</footer>
</html>
$("#parent").on({
mousemove: function (e) {
var wrapper = $(this);
var parentOffset = wrapper.offset();
var relX = e.pageX - parentOffset.left + wrapper.scrollLeft();
var relY = e.pageY - parentOffset.top + wrapper.scrollTop();
wrapper.find('.randomTrail:visible').remove();
wrapper.append($('<div class="randomTrail"/>').css({
left: relX,
top: relY
}));
},
mouseleave: function () {
$('.randomTrail:visible').remove();
}
});
DEMO
Ref:
.offset()
.scrollLeft()
.scrollTop()
.remove()
e.pageX and e.pageY
.on()
mousemove
mouseleave
Events
find()
You will need to use mousemoves() to get the event data and coordinate like below
$( "#target" ).mousemove(function( event ) {
var msg = "Handler for .mousemove() called at ";
msg += event.pageX + ", " + event.pageY;
console.log(msg);
});
and you will need a div with css {position:absolute; width:10px; height:10px; background-color:yellow; left: event.pageX; top:event.pageY} something like this will do
For more info checkout official doc from jQuery
I have the following code...
Once an image is clicked it is animated (e.g. Resized and moved) to look like it is flipping over to reveal another image. This works perfectly fine when the code is applied to images, but when I want to apply it to a containing div, that contains tags and a few more images, all goes wrong.
THIS WORKS:
<img alt="" src="image_1.jpg" id="image1" />
<img alt="" src="images_2.jpg" id="image2" />
JS
$(document).ready(function() {
var margin = $("#image1").width()/2;
var width = $("#image1").width();
var height = $("#image1").height();
$("#image2").stop().css({width:'0px',height:''+height+'px',marginLeft:''+margin+'px',opacity:'0.5'});
$("#image1").click(function(e) {
e.preventDefault();
$(this).stop().animate({width:'0px',height:''+height+'px',marginLeft:''+margin+'px',opacity:'0.5'},{duration:500});
window.setTimeout(function() {
$("#image2").stop().animate({width:''+width+'px',height:''+height+'px',marginLeft:'0px',opacity:'1'},{duration:500});
},500);
});
$("#image2").click(function(e) {
e.preventDefault();
$(this).stop().animate({width:'0px',height:''+height+'px',marginLeft:''+margin+'px',opacity:'0.5'},{duration:500});
window.setTimeout(function() {
$("#image1").stop().animate({width:''+width+'px',height:''+height+'px',marginLeft:'0px',opacity:'1'},{duration:500});
},500);
});
});
THIS DOESN'T WORK
<div class="containerOne">
<img src="image_1.jpg" alt="" />
<img src="image_3" alt="" />
</div>
<div class="containerTwo">
<img src="image_2" alt="" />
</div>
JS
$(document).ready(function(){
var margin = $(".containerOne").width()/2;
var width = $(".containerOne").width();
var height = $(".containerOne").height();
$(".containerTwo").stop().css({
width:'0px',
height:''+height+'px',
marginLeft:''+margin+'px',
opacity:'0.5'
});
$(".departmentProducts").click(function(e) {
e.preventDefault();
$(this).find('.containerOne').stop().animate({
width:'0px',
height:''+height+'px',
marginLeft:''+margin+'px',
opacity:'0.5'
}, { duration:500 });
window.setTimeout(function() {
$(".containerTwo").stop().animate({
width:''+width+'px',
height:''+height+'px',
marginLeft:'0px',
opacity:'1'
},{ duration:500 });
},500);
});
$(".departmentProduct").click(function(e) {
e.preventDefault();
$(this).find('.containerTwo').stop().animate({
width:'0px',
height:''+height+'px',
marginLeft:''+margin+'px',
opacity:'0.5'
},{ duration:500 });
window.setTimeout(function() {
$(".containerOne").stop().animate({
width:''+width+'px',
height:''+height+'px',
marginLeft:'0px',
opacity:'1'
},{ duration:500 });
},500);
});
});
See this jQuery plugin here. Named Flippy and seems to be lightweight.
Your code look well, but i think that you are using animate() on your div container of
, you image not change his visual properties, because his properties steel the same, I recomend to you check this link https://api.jquery.com/animate/ ,
look this simple example how animate a div.
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>animate demo</title>
<style>
div {
background-color: #bca;
width: 100px;
border: 1px solid green;
}
</style>
<script src="//code.jquery.com/jquery-1.10.2.js"></script>
</head>
<body>
<button id="go">ยป Run</button>
<div id="block">Hello!</div>
<script>
// Using multiple unit types within one animation.
$( "#go" ).click(function() {
$( "#block" ).animate({
width: "70%",
opacity: 0.4,
marginLeft: "0.6in",
fontSize: "3em",
borderWidth: "10px"
}, 1500 );
});
</script>
</body>
</html>
Hope Hepls.
I want the width wise transition in image on clicking the image(size of image reduces slowly)
<head>
<script type="text/javascript">
function movediv(){
var division = document.getElementById('image');
division.style.width = "1000px";
division.style.width ='600px' ;
division.style.transition ='width 2s';
}
</head>
<body>
<img src = "generic_sky_wallpaper-1280x800.jpg" id="image" onclick="movediv();">
</body>
This FIDDLE will animate a friend of mine.
JS
$( ".imagediv" ).click(function(){
$( "#minion" ).animate({
height: 400,
width: 300
}, 3000,
function() {
// complete.
});
});