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.
});
});
Related
I'm using the Jssor library to make an image slider that should allow the images to be sorted (by swiping to the right for yes and to the left for no).
I would like:
for each image to disappear after a swipe to the left or right
to keep track of which images were swiped in which direction
to feed the resulting array into a table to appear after all the images have been swiped
I've seen that there are "isToRight" and "isToLeft" functions in the jssor.slider.js file, but when I tried to use them inside of my JavaScript, my page didn't seem able to access them. Also, I must not be putting my code in the right part of the JavaScript, because the entire slider stops working. I'm not sure if adding divs with images to a table will work well, but I'm not sure how else to go about it. What do I need to do to get this working? This is where I am currently:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>Simple Slider Example - Jssor Slider, Slideshow</title>
</head>
<body style="font-family:Arial, Verdana;background-color:#fff;">
<!-- it works the same with all jquery version from 1.3.1 to 2.0.3 -->
<script type="text/javascript" src="../js/jquery-1.9.1.min.js"></script>
<!-- use jssor.slider.mini.js (39KB) or jssor.sliderc.mini.js (31KB, with caption, no slideshow) or jssor.sliders.mini.js (26KB, no caption, no slideshow) instead for release -->
<!-- jssor.slider.mini.js = jssor.sliderc.mini.js = jssor.sliders.mini.js = (jssor.core.js + jssor.utils.js + jssor.slider.js) -->
<script type="text/javascript" src="../js/jssor.core.js"></script>
<script type="text/javascript" src="../js/jssor.utils.js"></script>
<script type="text/javascript" src="../js/jssor.slider.mini.js"></script>
<script type="text/javascript" src="../js/jssor.slider.js"></script>
<script>
jQuery(document).ready(function ($) {
var options = {
$FillMode: 4,
};
var jssor_slider1 = new $JssorSlider$('slider1_container', options);
//responsive code begin
//you can remove responsive code if you don't want the slider scales
//while window resizes
function ScaleSlider() {
var parentWidth = $('#slider1_container').parent().width();
if (parentWidth) {
jssor_slider1.$ScaleWidth(parentWidth);
}
else
window.setTimeout(ScaleSlider, 30);
}
//Scale slider after document ready
ScaleSlider();
$(window).bind("load", ScaleSlider);
$(window).bind("resize", ScaleSlider);
$(window).bind("orientationchange", ScaleSlider);
//responsive code end
var no_array = [];
var yes_array = [];
function sortImages() {
if SWIPE? (isToRight()) {
$this.push(yes_array);
$this.hide();
}
else SWIPE? (isToLeft()) {
$this.push(no_array);
$this.hide();
}
return no_array;
return yes_array;
}
sortImages();
var myArray = [[no_array], [yes_array]];
function makeTableHTML(myArray) {
var result = "<table>";
for(var i=0; i<myArray.length; i++) {
result += "<tr>";
for(var j=0; j<myArray[i].length; j++){
result += "<td>"+myArray[i][j]+"</td>";
}
result += "</tr>";
}
result += "</table>";
$('#sortedTable').html(result);
}
makeTableHTML(myArray);
});
</script>
<div id="main">
<h1>Swipe right for yes and left for no.</h1>
<div id="slider1_container" style="position: relative; top: 0px; left: 0px; width: 300px; height: 200px; overflow: hidden;">
<!-- Slides Container -->
<div u="slides" style="cursor: move; position: absolute; overflow: hidden; left: 0px; top: 0px; width: 300px; height: 180px;">
<div><img src="{{ STATIC_URL }}images/indian.jpg" alt="" title=""/></div>
<div><img src="{{ STATIC_URL }}images/hamburger.jpg" alt="" title=""/></div>
<div><img src="{{ STATIC_URL }}images/italian-pizza.jpg" alt="" title=""/></div>
<div><img src="{{ STATIC_URL }}images/hummus.jpg" alt="" title=""/></div>
<div><img src="{{ STATIC_URL }}images/pie.jpg" alt="" title=""/></div>
<div><img src="{{ STATIC_URL }}images/montecristo.jpg" alt="" title=""/></div>
<div><img src="{{ STATIC_URL }}images/eclairs.jpg" alt="" title=""/></div>
</div>
<script>jssor_slider1_starter('slider1_container');</script>
</div>
<div id="sortedTable">
</div>
</div>
</body>
</html>
Please use api to track events,
<script>
jssor_slider1.$On($JssorSlider$.$EVT_SWIPE_START, function(position, virtualPosition){});
jssor_slider1.$On($JssorSlider$.$EVT_SWIPE_END, function(position, virtualPosition){});
</script>
by comparing variable position, you will know what happened.
see jssor slider api.
Also, $EVT_PARK is also resonable,
<script>
jssor_slider1.$On($JssorSlider$.$EVT_PARK, function(slideIndex, fromIndex){
//fires when slide change from 'fromIndex' to 'slideIndex'
});
</script>
<script>
jQuery(document).ready(function ($) {
var options = {
$FillMode: 4,
};
var jssor_slider1 = new $JssorSlider$('slider1_container', options);
//swipe handling begin
var swipeStartPosition
function OnSwipeStart(position, virtualPosition)
{
lastSwipePosition = virtualPosition;
}
function OnSwipeEnd(position, virtualPosition)
{
if(virtualPosition > swipeStartPosition)
{
//swipe to left end, do something here
//var currentSlideIndex = jssor_slider1.$CurrentIndex();
}
else
{
//swipe to right end, do something here
//var currentSlideIndex = jssor_slider1.$CurrentIndex();
}
}
jssor_slider1.$On($JssorSlider$.$EVT_SWIPE_START, OnSwipeStart);
jssor_slider1.$On($JssorSlider$.$EVT_SWIPE_END, OnSwipeEnd);
//swipe handling end
//responsive code begin
//you can remove responsive code if you don't want the slider scales
//while window resizes
function ScaleSlider() {
var parentWidth = $('#slider1_container').parent().width();
if (parentWidth) {
jssor_slider1.$ScaleWidth(parentWidth);
}
else
window.setTimeout(ScaleSlider, 30);
}
//Scale slider after document ready
ScaleSlider();
$(window).bind("load", ScaleSlider);
$(window).bind("resize", ScaleSlider);
$(window).bind("orientationchange", ScaleSlider);
//responsive code end
}
</script>
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.
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 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>
How to set up animation to element once it appears? (So that others with same properties remain calm.) I am trying to do like this:
$.each(data, function(i, obj) {
if(obj['Ping'] == "FALSE"){
out = "<li class='red'>"+obj.Vardas+" is down..."+obj.Data+"</li>";
/////animation, once the element gets generated
$(out).prependTo('#database').animate({fontColor:"red", 1000});
out ="";
}else{
out = "<li>"+obj.Vardas+" is up......."+obj.Data+"</li>";
$(out).prependTo('#database');
out ="";
}
});
});
});
</script>
</head>
<body>
<div style="float:right; overflow-y:scroll; height: 400px; width: 50%">
<ul id ='database'></ul>
</div>
jQuery is not able to use color for animation. But for such things you can use jQuery Color plugin ( https://github.com/jquery/jquery-color ).
Here is small working example with opacity blink:
<head>
<script src="http://code.jquery.com/jquery-1.8.3.min.js"></script>
<script>
var t = function(){
for(var i = 0; i < 5; i++){
$("<li>ata" + i + "tata</li>").prependTo($("ul")).animate({opacity: 0.10}, 200).animate({opacity: 1}, 200);
}
}
$(function(){
setInterval(t, 1000);
});
</script>
</head>
<body>
<ul> </ul>
</body>
</html>