Simple jQuery animation: position change not occuring as expected - javascript

I'm new to jQuery, and have written a very simple script using the .animate() function. Here's the complete HTML source code:
<!doctype html>
<html>
<head>
<title>Testing jQuery</title>
<style type="text/css">
div {
width: 400px;
height: 300px;
position: relative;
left: 10px;
margin: 10px 20px;
}
#red {
background-color: red;
}
#green {
background-color: green;
}
#blue {
background-color: blue;
}
</style>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function() {
$("div").click(function() {
$(this).animate({opacity: 0.6, left: "+=40;"}, 2000);
});
});
</script>
</head>
<body>
<div id="red"></div>
<div id="green"></div>
<div id="blue"></div>
</body>
</html>
It appears that writing the .animate() function this way only animates the opacity of the clicked div and does not affect any change in its position. Interestingly, if I reverse the order of the arguments in the .animate() function, as so:
$("div").click(function() {
$(this).animate({left: "+=40",opacity: 0.6}, 2000);
});
There occurs both a change in position and a change in opacity. I followed the syntax from the .animate() jQuery API documentation, and there's a similar syntax used there:
$( "#clickme" ).click(function() {
$( "#book" ).animate({
opacity: 0.25,
left: "+=50",
height: "toggle"
}, 5000, function() {
// Animation complete.
});
});
I'm pretty sure the error is in my code itself, just can't put my finger on it yet.

Related

How to run an animation with delay while another animation in progress

How can I fade out the div (or animate its opacity to 0) over 1000 milliseconds after 4000 milliseconds in the last 1000 milliseconds of the div's animation (while the div is still moving)?
<!DOCTYPE html>
<html>
<head>
<script src="http://code.jquery.com/jquery-latest.min.js"></script>
<script>
function animateDiv(){
$("div").animate({left:"500px"},5000);
}
</script>
<style>
div {
background:red;
width:50px;
height:50px;
position:relative;
left:0;
}
</style>
</head>
<body onload="animateDiv();">
<div></div>
</body>
</html>
Note : queue:false is most important here.
Using queue:false you can run the animations simultaneously. Use delay() function for fadeOut() to wait. Which will give a smooth effect of the div slowly hiding when the left animation is coming to an end. Using progress we can identify the time left in the initial animation.
function animateDiv() {
$("div").animate({
left: "500px"
}, {
duration:5000,
queue:false
}).delay(3000).fadeOut(2000);
}
div {
background: red;
width: 50px;
height: 50px;
position: relative;
left: 0;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<body onload="animateDiv();">
<div></div>
</body>
As an alternative( preferred solution ) like Rayon Dabre suggested, we can use the underlying functionalities of animate() function, we can use this to perfect it with out using delay and executing the second animation with the best time constraint as possible.
var flag = true;
function animateDiv() {
$("div").animate({
left: "200px"
}, {
queue: false,
duration: 5000,
step: function(now) { },
progress: function(animation, progress, remainingMs) {
if (remainingMs < 2000 && flag) {
flag = false;
$("div").fadeOut(1000);
}
}
});
}
div {
background: red;
width: 50px;
height: 50px;
position: relative;
left: 0;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<body onload="animateDiv();">
<div></div>
</body>
Try something like this:
$("div").animate({left:"500px"},{duration:1000,start:function(){
$(this).animate({opacity:"0"},400);
}});
or:
$("div").animate({left:"500px"},{duration:10000, queue:false,start:function(){
$(this).delay(6000).animate({opacity:"0"},4000);
}});

Stop on hover on a div

Alright so I am trying to get an on hover function to work where it the div that I am on will pause on hover and start up again when my mouse has left the hover area. Here is what I have so far
HTML
<div id="slideshow">
<div>
<iframe width="400"; " height="290"; src="www.google.com"></iframe>
</div>
<div>
<iframe width="400"; " height="290"; src="www.google.com"></iframe>
</div>
<div>
<iframe width="400"; " height="290"; src="www.google.com"></iframe>
</div>
</div>
CSS
<style>
#slideshow {
position: relative;
width: 340px;
height: 340px;
padding: 1px;
box-shadow: 0 0 20px rgba(0,0,0,0.4);
}
#slideshow > div {
position: relative;
top: 0px;
left: 0px;
right: 0px;
bottom: 0px;
}
</style>
jQuery
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script>
$("#slideshow > div:gt(0)").hide();
$("#slideshow").hover(function () {
this.stop();
}, function () {
this.start();
});
setInterval(function() {
$('#slideshow > div:first')
.fadeOut(0)
.next()
.fadeIn(1000)
.end()
.appendTo('#slideshow');
}, 10500);
</script>
any help on the issue would be greatly appreciated. I have tried a few different things that haven't worked such as .hover(), .stop(), and clearInterval(). I think my execution is all wrong. Thanks in advance.
You begin learn javascript. you must read document and understand function to use api like jquery and other javascript library. please understand function and use it this.start() and this.stop() where you define it?
You can achieve your goal using clearInterval on mouseenter event.
Try this
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>slideshow</title>
<style>
#slideshow {
position: relative;
width: 400px;
height: 290px;
box-shadow: 0 0 20px rgba(0,0,0,0.4);
}
#slideshow iframe {
position: absolute;
top: 0px;
left: 0px;
height: 100%; /* fit to parent */
width: 100%;
display: none;
}
#slideshow iframe:first-child{display:block;} /*Initially display
the first iframe */
</style>
</head>
<body>
<div id="slideshow">
<iframe src="http://www.example.com"></iframe>
<!-- You cannot use www.google.com. The reason for this is,
that Google is sending an "X-Frame-Options: SAMEORIGIN" response header.
This option prevents the browser from displaying iFrames that are not hosted
on the same domain as the parent page. -->
<iframe src="http://www.example.com"></iframe>
<iframe src="http://www.example.com></iframe>
</div>
<script src="http://code.jquery.com/jquery-2.1.1.min.js"></script>
<script>
myinterval = doAnimation(); // Start the animation
$('#slideshow').on({
mouseenter: function(e){
clearInterval(myinterval); //stop animation
},
mouseleave: function(e){ //restart animation
myinterval = doAnimation();
}
});
// Animate the slideshow.
function doAnimation(){
return setInterval(function(){
$('#slideshow :first-child')
.fadeOut()
.next('iframe')
.fadeIn()
.end()
.appendTo('#slideshow');
}, 2000);
}
</script>
</body>
</html>

Why does div content jump after slide effect

<style>
#toggle {
width: 150px;
height: 50px;
background: crimson;
color: white;
padding: 0;
}
</style>
<script src="https://code.jquery.com/jquery-1.10.2.js"></script>
<script src="https://code.jquery.com/ui/1.11.0/jquery-ui.js"></script>
</head>
<body>
<button id="clickme">Click moi</button>
<div id="toggle">
<p>This will slide in and out.</p>
</div>
<script>
$( document ).ready(function() {
$('#clickme').click(function () {
$( "#toggle" ).toggle( "slide" );
});
});
</script>
The height of the #toggle div should be constant before/during/after the slide effect. For some reason the div slides out and then the height increases to 50px. I wanted to know why this is happens.
Removed p as it wasn't required for this example. It's works, see here:
http://jsfiddle.net/3bVZy/
If you require p, let me know.
EDIT
For the same distance, in this example, add the following to your #toggle CSS:
position: relative;
top:15px;
the problem is Paragraphe margin ,
if you set paragraphe P margin to 0 ,
it will work perfectly
p { margin: 0; }
That's will solve your problem
Try This
$(document).ready(function() {
$('#clickme').click(function () {
$("#toggle" ).toggle("slide");
});
});
I have changed the jquery reference and also the css part
Demo1
Demo2

Footer on hover and on scroll problems

I really cannot figure it out how can I accomplish this. I need to have a footer partially visible all the time at the bottom. When you hover it shows up entire height of 400px, then get back to the original position.
The problem that I have is with the scroll function. I do not know how to set it properly. The result I am looking for is when you scroll all the way down (without hovering) the footer needs to take the full height, if you scroll up the footer goes back to the original position.
Here is the jsFiddle (I hope it works, this is the first time when I use this).
Below is the code:
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Untitled Document</title>
<script src="http://code.jquery.com/jquery-1.9.1.js"></script>
<script type="text/javascript">
$(window).scroll(function () {
if ($(window).scrollTop() > $('#move').position() -500) {
$('#footer').css('bottom', 0);
}
else {
$('#footer').css('bottom', -300);
}
});
$(document).ready(function () {
$('#footer').bind('mouseenter', function () {
$(this).stop().animate({ bottom: 0 }, 400); // on hover 0 400
}).bind('mouseleave', function () {
$(this).stop().animate({ bottom: -300 }, 400); // on out -300 400
});
});
</script>
<style>
html, body{
}
#footer {
position: fixed;
z-index: 999;
bottom: -300px;
width: 100%;
height: 400px;
background-color: #999;
opacity:0.5;
}
#content {
padding-bottom: 100px;
}
#move {
height:auto;
top: 5000px;
position: relative;
background-color:red;
}
</style>
</head>
<body>
<div id="content">
<h1 id="move"> end content </h1>
</div>
<div id="footer">
this is the footer
</div>
</body>
</html>
Updated fiddle: http://jsfiddle.net/moonspace/ZCger/1/
Add this JS into your '$(window).scroll(function () {}'
if( $(window).scrollTop() + $(window).height() == $(document).height() ) {
$('#footer').css('bottom', 0);
}

Can't get jQuery to fadeIn my images?

I can't get these images to fade in at all, and I don't know what I'm doing wrong. I have put alert("hi") instead of $(this).fadeIn() and the popup is shown. I've tried putting the code at the end, I've tried linking to a a local jQuery script, I've tried just doing the $("#eTR1").fadeIN() inside the $(document).ready() but that also doesn't work:
<!doctype HTML>
<html>
<head>
<meta charset="UTF-8">
<link rel="stylesheet" href="style.css">
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js"></script>
<script>
$(document).ready(function()
{
$("#eTR1").bind("load", function() { $(this).fadeIn(); });
$("#eTR2").bind("load", function() { $(this).fadeIn(); });
$("#eTR3").bind("load", function() { $(this).fadeIn(); });
$("#eBL1").bind("load", function() { $(this).fadeIn(); });
$("#eBL2").bind("load", function() { $(this).fadeIn(); });
$("#eBL3").bind("load", function() { $(this).fadeIn(); });
});
</script>
</head>
<body>
<aside id="eTRRibbons">
<img id="eTR1" src="res/tr1.png">
<img id="eTR2" src="res/tr2.png">
<img id="eTR3" src="res/tr3.png">
</aside>
<aside id="eBLRibbons">
<img id="eBL1" src="res/bl1.png">
<img id="eBL2" src="res/bl2.png">
<img id="eBL3" src="res/bl3.png">
</aside>
</body>
</html>
and
html
{
height: 100%;
}
body
{
min-height: 100%;
margin: 0px;
}
#eTR1,#eTR2,#eTR3
{
position: fixed;
top: 0px;
right: 0px;
opacity: 0.0;
filter: alpha(opacity = 0);
}
#eBL1,#eBL2,#eBL3
{
position: fixed;
bottom: 0px;
left: 0px;
opacity: 0.0;
filter: alpha(opacity = 0);
}
What am I doing wrong?
don't set the opacity in the css. give it a display: none;
http://jsfiddle.net/rlemon/zSzva/
I have also added a 1000ms duration to your fadeIn so you can see the effect in the example.
The .fadeIn() works with display: none; you should set that in your CSS and not opacity: 0 which isn't needed.

Categories