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.
Related
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 have 2 css classes , left side and right side of screen and i need to put them togheter, in these classes i have images which look like a puzzle:
By dragging image from the right side to the left side.At drop,must fit with the image from left side. I read about drag and drop but didnt find something like that :(
What i've tried?
EDIT: http://postimg.org/image/je31ptb6d/ (this is an example with my pictures.On top are images separated as classes - class="left" for ca and class="right" for nă.On bottom are images after i drop the image from right to one from left.My question is how to specify the correct drop zone to make images look like bottom one from link after i drop image from right side? )
JS/Jquery:
// shuffle function for right side only
$(document).ready(function() {
var a = $(".right > img").remove().toArray();
for (var i = a.length - 1; i >= 1; i--) {
var j = Math.floor(Math.random() * (i + 1));
var bi = a[i];
var bj = a[j];
a[i] = bj;
a[j] = bi;
}
$(".right").append(a);
});
// drag and drop
$(function() {
$( ".right img" ).draggable
({
cursor: 'move',
revert: 'invalid',
});
$( ".left img" ).droppable({
tolerance: 'fit',
});
});
HTML:
<div class="left">
<img class="piese" id="piesa1" src="images/Text_1.svg" />
<img class="piese" id="piesa2" src="images/Text_2.svg" />
<img class="piese" id="piesa3" src="images/Text_3.svg" />
<img class="piese" id="piesa4" src="images/Text_4.svg" />
</div>
<div class="right">
<img class="piese" id="piesa5" src="images/Text_5.svg" />
<img class="piese" id="piesa6" src="images/Text_6.svg" />
<img class="piese" id="piesa7" src="images/Text_7.svg" />
<img class="piese" id="piesa8" src="images/Text_8.svg" />
</div>
To solve your problem you must build a grid
and use drag drop by taking as a reference the location of the squares of the grid.
This is a simple example to give you an idea.
<!DOCTYPE HTML>
<html>
<head>
<title>Example</title>
<style>
#grid{
background-color: #09F;
height: 130px;
width: 390px;
position:relative;
margin:100px auto;
}
.square{
height: 128px;
width: 128px;
border:1px solid #999;
float:left;
}
#first-image{
position: absolute;
left: 0px;
}
#second-image{
position: absolute;
right: 0px;
}
</style>
</head>
<body>
<!--take two images by 120px with this class and id -->
<div id="grid">
<img class="dr" id="first-image" src="your-image.png" width="128" height="128">
<img class="dr" id="second-image" src="your-image.png" width="128" height="128">
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script>
$(document).ready(function(){
for(xx = 0; xx < 3; xx++) {
$("#grid").append($('<div class="square"></div>'));
};
$('.dr').on("dragstart", function (event) {
var dt = event.originalEvent.dataTransfer;
dt.setData('Text', $(this).attr('id'));
});
$('div.square').on("dragenter dragover drop", function (event) {
event.preventDefault();
if (event.type === 'drop') {
var data = event.originalEvent.dataTransfer.getData('Text',$(this).attr('id'));
de=$('#'+data).detach();
var x = $(this).position().left;
var y = $(this).position().top;
de.css({'position':'absolute','top':y+'px','left':x+'px'}).appendTo($(this));
};
});
});
</script>
</body>
</html>
Im having problem getting the original width and height of a div, without the style property that is generated with a code.
This is how I solved it
var currentWidth = $("#container").width();
var currentHeight = $("#container").height();
$("#container").removeAttr("style");
var containerWidth = $("#container").width();
var containerHeight = $("#container").height();
$("#container").css("width", currentWidth, "height", currentHeight);
$("#container").animate({
width: containerWidth,
height: containerHeight
}, "slow");
This is pretty bad coded and it wont animate the height. I guess there is a easier way to solve this.
Like for example, $("#container").width(ignoring style attr);
Edit, better explenation:
In my css file the original size of container is 500x500.
But then when you click on a link it changes to 800x800 (adding the attribute style), now when you click back I want it to change back to 500x500 but I want the code to find out the original size for easier changes.
The code that changes the #container:
$("#container").animate({
width: 1250,
height: 600
}, "slow");
Thanks in advance!
Updated:
Keep the original width and height as min-width and min-height i.e in your case:
min-width: 500px;
min-height: 500px;
and then do this using jQuery:
$("#container").animate({
width: "",
height: ""
}, "slow");
Working Fiddle
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<script src="Scripts/jquery-1.8.2.js" type="text/javascript"></script>
<script type="text/javascript">
$(document).ready(function () {
var curentDivWidth = 500;
var curentDivHeight = 500;
var clicked = false;
$("#ClickMe").click(function () {
if (!clicked) {
$("#container").animate({
width: 1250,
height: 600
}, "slow");
clicked = true; return;
}
$("#container").animate({
width: curentDivWidth,
height: curentDivHeight
}, "slow");
clicked = false;
});
});
</script>
<title>example</title>
</head>
<body>
<a href="javascript:void(0)" id="ClickMe" >click me </a>
<div id="container" style="border:1px solid black" >
the div
</div>
</body>
</html>
jsfiddle : http://jsfiddle.net/seekpunk/JhzAD/
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.
});
});
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>