I'm using JQuery UI to toggle the div with effect .toggle('blind', 250).
I have tackled the .stop() method but it was not my goal in toggling the div, because when I want to toggle the div #clContainer even clicking multiple times the other div #ccConatiner can only be toggled next when it is done...
Here's my Code
$(function(){
$("#clContainer").on('click', function(){
$("#ccContainer").toggle('blind', 350);
});
});
#ccContainer,
#clContainer{
margin: 10px;
height: 100px;
width: 100px;
background-color: #333;
cursor: pointer;
color: #fff;
}
#ccContainer{
display: none;
}
<html>
<head>
<script src="http://code.jquery.com/jquery-1.12.0.min.js"></script>
<script src="http://code.jquery.com/ui/1.11.4/jquery-ui.js"></script>
</head>
<div>
<div id="clContainer">
Click me
</div>
<div id="ccContainer"></div>
</div>
</html>
Please help.
You need to set a flag each time your animation starts, and clear it when it finishes. and on each click check for the flag to see if there is an ongoing animation and only animate again if there isn't any ongoing animation.
you can use .promise().done() to set a callback function that will run as soon as all animations on your cube finish, and in this callback clear the animation_ongoing flag:
var animation_ongoing=0;
$(function() {
$("#clContainer").on('click', function() {
if(!animation_ongoing){
animation_ongoing=1;
$("#ccContainer").toggle('blind', 350).promise().done(function(){
animation_ongoing=0;
});
}
});
});
#ccContainer,
#clContainer {
margin: 10px;
height: 100px;
width: 100px;
background-color: #333;
cursor: pointer;
color: #fff;
}
#ccContainer {
display: none;
}
<html>
<head>
<script src="http://code.jquery.com/jquery-1.12.0.min.js"></script>
<script src="http://code.jquery.com/ui/1.11.4/jquery-ui.js"></script>
</head>
<div>
<div id="clContainer">
Click me
</div>
<div id="ccContainer"></div>
</div>
</html>
Related
I'm looking to have the fade animation happen plus have the height of .hideme also growing from 0px to 30px during the ().delay(2000).
Instead of .hideme appearing as display: block; on click, I want it's height to go from 0px to 30px for ().delay(2000) while also keeping the fade animation.
$(document).ready(function() {
$("#post-draft1").hide();
$("#post-button1").click(postNotification);
});
function postNotification() {
$("#post-draft1").fadeIn("slow").delay(2000).fadeOut("slow");
}
.hideme {
background: blue;
height: 30px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button id="post-button1">Save Click</button>
<div class="hideme" id="post-draft1">This is a test div</div>
$(document).ready(function() {
$("#post-draft1").hide();
$("#post-button1").click(postNotification);
});
function postNotification() {
// $("#post-draft1").fadeIn("slow").delay(2000).fadeOut("slow");
$("#post-draft1").show().animate({height: '30px',opacity: 1},1000).delay(2000).animate({height: '0px',opacity: 0},1000);
}
.hideme {
background: blue;
height: 0px;
opacity: 0;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button id="post-button1">Save Click</button>
<div class="hideme" id="post-draft1">This is a test div</div>
To animate the height you could use the .animate() jQuery method.
$('.hideme').animate({height:'30px'});
But first, you have to set the height to a minor value:
.hideme {
background: blue;
height: 0px;
}
Instead of .delay() you could use the callback of fadeIn to animate the height of .hideme when fadeIn completes:
$("#post-draft1").fadeIn("slow", function(){
$('.hideme').animate({height:'30px'});
});
See: http://api.jquery.com/animate/
I'm not certain of the reason, but this particular function does not seem to be working in both the Safari/iOS and Chrome browsers:
$(window).on('load',function(){
$('#preloader').fadeOut(800).hide();
$('#preload').fadeIn(800).css('display', 'initial').show();
});
I've currently inserted the script before the </head> tag. Could anyone explain why this is occurring?
UPDATE:
$(window).on('load', function() {
$('#preloader').fadeOut(800).hide();
$('#preload').fadeIn(800).css('display', 'initial').show();
});
.preloader-wrap {
width: 100%;
height: auto;
display: block;
margin: 0 auto;
text-align: center;
line-height: 0;
}
#preloader {
margin: 40px 0;
padding: 0;
border: 0;
width: 45px;
height: 45px;
}
#preload {
display: none;
}
img {
width: 100%;
height: auto;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<script src="http://static.tumblr.com/4m2ikeh/q2Poxnx2k/jquery-3.2.1.min.js"></script>
<div class="preloader-wrap">
<img src="https://cdn.ndtv.com/vp/static/images/preloader.gif" id="preloader" />
</div>
<div id="preload">
<img src="https://78.media.tumblr.com/708bb6dcdaf359fd2ea83d11a0b5b4b8/tumblr_oyslstg5xk1unhdoco10_r1_1280.jpg">
</div>
Why do you use hide() when you use fadeOut() and show() when you use fadeIn(). However have a look at here:
$(document).ready(function() {
$("#preloader").fadeOut(800, function() {
$("#preload").fadeIn(800)
});
});
#preload {
display: none;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="preloader">
Preloader Content
</div>
<div id="preload">
Preload Content
</div>
It is working for me in Firefox, Chrome, Safari
Maybe those multiple concurring ways to show and hide the elements are in cause. I don't have any IOS device to be sure.
If you wish a delay and the fades one after the other, try this way:
$(window).on('load',function(){
setTimeout(function(){
$('#preloader').fadeOut(800, function(){
$('#preload').fadeIn(800); // FadeIn after fadeOut complete.
});
},800); // delay from the load event and the fadeOut.
});
My HTML Code is :
<!DOCTYPE html>
<html>
<head>
<title>Furry Friends Campaign</title>
<link rel="stylesheet" type="text/css" href="styles/my_style.css">
</head>
<body>
<div id="clickMe">Show me the the Furry Friend of the Day</div>
<div id="picframe">
<img src="images/furry_friend.jpg" alt="Our Furry Friend">
</div>
<script type="text/javascript" src="scripts/jquery-3.1.0.min.js"></script>
<script type="text/javascript">
$(document).ready(function()
{
$("#clickMe").click(function()
{
$("img").fadeIn(1000);
$("#picframe").slideToggle("slow");
});
});
</script>
</body>
</html>
The accompanying CSS looks like:
#clickMe {
background: #D8B36E;
padding: 20px;
text-align: center;
width: 205px;
display: block;
border: 2px solid #000;
}
#picframe {
background: #D8B36E;
padding: 20px;
width: 205px;
display: none;
border: 2px solid #000;
}
The slideToggle works perfectly, but for some reason, the image doesn't fade in. I've tried setting the duration to longer periods, but that yields the same results. Can someone point out what's wrong with this code? I'm using the latest version of Chrome.
UPDATE: I tried running the example code of the book I was using, which uses jquery-1.6.2.min.js and using that version of jQuery, the code works perfectly. Is this some error on jQuery's part? Or is the new way that things will be done now?
Since jQuery 1.8, fadeIn no longer initially hides the image, so trying to fade in an image which is visible or doesn't have display set to none won't lead to anything.
To fade in, you should hide it first. Initially it's not hidden, since children don't inherit display CSS property, and you have set it to none only on #picframe, the parent of img. Just add $("img").hide(); on ready. This will make it work.
Since it looks like you need to fade it in / out with each click, you could do the following instead of $("img").fadeIn(1000):
if($("img").is(":hidden")) $("img").fadeIn(1000);
else $("img").fadeOut(1000);
Demo below.
#clickMe {
background: #D8B36E;
padding: 20px;
text-align: center;
width: 205px;
display: block;
border: 2px solid #000;
}
#picframe {
background: #D8B36E;
padding: 20px;
width: 205px;
display: none;
border: 2px solid #000;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.0/jquery.min.js"></script>
<div id="clickMe">Show me the the Furry Friend of the Day</div>
<div id="picframe">
<img src="images/furry_friend.jpg" alt="Our Furry Friend">
</div>
<script type="text/javascript" src="scripts/jquery-3.1.0.min.js"></script>
<script type="text/javascript">
$(document).ready(function() {
//$("img").hide();
$("#clickMe").click(function() {
$("img").fadeIn(1000);
$("#picframe").slideToggle("slow");
});
});
</script>
Somehow, img didn't inherit the display:none in #picframe div. Here's the fix: https://jsfiddle.net/69rLha7e/1/
There is a "timing" consideration while playing with multiple animations a time.
In this CodePen, I used diferent timing for fadeIn, fadeOut and toggleSlide.
And you have to check the display state in order to decide to fade in or out.
$(document).ready(function(){
$("#clickMe").click(function(){
console.log( $("img").css("display") ) ;
if( $("img").css("display")=="inline" ){
$("img").fadeOut(400);
}else{
$("img").fadeIn(800);
}
$("#picframe").slideToggle(400);
});
});
I am trying to create an element which is able to disappear after clicking on it. The code apparently works but, if you try to click the div multiple times you will see that the animation restarts and executes multiple times.
Is there a way to make it play just once even if multiple clicks are applied on it?
Here's what I've got:
$(document).ready(
function() {
$('#movingDiv').click(function() {
$(this).hide('slide', {
direction: 'right'
}, 1000);
});
});
#movingDiv {
width: 50%;
height: 3em;
border: 3px solid red;
color: #000;
background-color: orange;
text-align: center;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.5/jquery-ui.js"></script>
<div id="movingDiv">Some content.</div>
You need to clear the animation queue on each click, instead of stacking up the animations. You can use stop() to achieve this:
$(document).ready(function(){
$('#movingDiv').click(function() {
$(this).stop().hide('slide', { direction: 'right' }, 1000);
});
});
Working example
this makes the animation stop momentarily when you click on it
This is true. It's due to the easing effect on the element animation. A possible workaround is to only allow a single click on the element to hide it.
$('#movingDiv').one('click', function() {
$(this).hide('slide', { direction: 'right' }, 1000);
});
Working example
Use 'unbind' to remove the click handler on the first click.
$(document).ready(
function() {
$('#movingDiv').click(function() {
$(this).unbind('click').hide('slide', {
direction: 'right'
}, 1000);
});
});
#movingDiv {
width: 50%;
height: 3em;
border: 3px solid red;
color: #000;
background-color: orange;
text-align: center;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.5/jquery-ui.js"></script>
<div id="movingDiv">Some content.</div>
Here's the suggested fiddle - http://jsbin.com/EzUTizuf/1/edit (because of the url navigation change the iframe from Codemirror JSBin goes to a blank page, which is why I didn't add a fiddle before)
I have an anchor navigating to #about.
When the window.location is equal to #about I want to execute a small function corresponding to that specific window location.
This is the last code I tried to do this.
if (window.location.href === "#about") {
$('.about').show();
document.title="About";
alert("About DIV Shows Only From This URL!");
}
If anyone can help it'd be greatly appreciated.
Thanks!
Here's the full code.
<!DOCTYPE html>
<html>
<head>
<title>Grab DIV Hash</title>
<meta charset='utf-8'>
<meta name='viewport' content='initial-scale=1.0'>
<script type='text/javascript' src='http://code.jquery.com/jquery-1.9.1.min.js'></script>
<style type='text/css'>
body {
position: absolute;
top: 0px; left: 0px;
width: 100%; height: 100%;
padding:0; margin:0;
background: #7abcff;
}
nav { text-align: center; }
a { outline: none; color: #000; text-decoration: none;}
a:hover { color: #555; }
a:active { color: #333; }
h1 {
margin-top: .25em;
font: bold 2.75em Arial, sans-serif;
text-shadow: rgba(0,0,0,0.5) -1px 0, rgba(0,0,0,0.3) 0 -1px, rgba(255,255,255,0.5) 0 1px, rgba(0,0,0,0.3) -1px -2px;
}
</style>
<script type="text/javascript">
$(document).ready(function() {
$('.about').hide();
function AboutPage() {
if (window.location.href === "#about") {
$('.about').show();
document.title="About";
alert("About DIV Shows Only From This URL!");
}
}
AboutPage();
});
</script>
</head>
<body>
<nav>
<h1>About</h1>
</nav>
<div class="about">
1) About link clicked!<br />
2) This div should only be visible from whatever.com/#about
</div>
</body>
</html>
Within the conditional use window.location.hash instead of window.location.href to detect the value of the hash.
The code must also attach an event handler to window.onhashchange to detect when the hash has changed. When the link is clicked jQuery's ready event is not fired since a new page is not being loaded.
$(document).ready(function() {
$('.about').hide();
window.onhashchange = function(){
if(window.location.hash === "#about"){
$(".about").show();
document.title="About";
}
};
});
JS FIDDLE: http://jsfiddle.net/H6DZH/