This code fades out an image on load after a delay. Is it possible to fade in a new image after the blue circle fades out? http://jsfiddle.net/gabrieleromanato/8puvn/
html
<div id="test"></div>
Javascript
(function($) {
$.fn.fadeDelay = function(delay) {
var that = $(this);
delay = delay || 3000;
return that.each(function() {
$(that).queue(function() {
setTimeout(function() {
$(that).dequeue();
}, delay);
});
$(that).fadeOut('slow');
});
};
})(jQuery);
$('#test').fadeDelay(4000);
CSS
#test {
margin: 2em auto;
width: 10em;
height: 10em;
background: #069;
border-radius: 50%;
}
do your fade in code inside fadeOut call back.
$(that).fadeOut('slow', function(){
//do fade in
});
sample
(function($) {
$.fn.fadeDelay = function(delay, awake) {
$(awake).hide();
var that = $(this);
delay = delay || 3000;
return that.each(function() {
$(that).queue(function() {
setTimeout(function() {
$(that).dequeue();
}, delay);
});
$(that).fadeOut('slow', function() {
$(awake).fadeIn('slow');
});
});
};
})(jQuery);
$('#test').fadeDelay(4000, "#test2"); //pass jquery selector, which element to show
.circle {
margin: 2em auto;
width: 10em;
height: 10em;
border-radius: 50%;
}
#test {
background: #069;
}
#test2 {
background: red;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="test" class="circle"></div>
<div id="test2" class="circle"></div>
Ofcourse it's possible, in jQuery animations second parameter is the function that runs after animation completes. More info
(function($) {
$.fn.fadeDelay = function(delay) {
var that = $(this);
delay = delay || 3000;
return that.each(function() {
$(that).queue(function() {
setTimeout(function() {
$(that).dequeue();
}, delay);
});
$(that).fadeOut('slow',function(){
$('#test2').fadeIn('slow');
});
});
};
})(jQuery);
$('#test').fadeDelay(4000);
#test {
margin: 2em auto;
width: 10em;
height: 10em;
background: #069;
border-radius: 50%;
}
#test2 {
margin: 2em auto;
width: 10em;
height: 10em;
background: #f69;
border-radius: 50%;
display:none;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div id="test"></div>
<div id="test2"></div>
Here's jsFiddle
Related
Here's an HTML page that displays three square divs in the upper left corner:
window.addEventListener('load', function () {
console.log('load event has fired')
window.scrollTo(500, 0);
// setTimeout(function() { window.scrollTo(500, 0); }, 0);
})
body { height: 100vh }
.bigwidth {
width: 2000px;
display: block;
}
.square {
width: 100px;
height: 100px;
display: block;
position: absolute;
}
.greenish {
background-color: #75af99;
}
.redish {
background-color: #ff9b98;
}
.bluish {
background-color: #aabbff;
}
.whiteish {
background-color: #eaeaea;
}
* {
padding: 0;
margin: 0;
}
<div class="whiteish bigwidth" style="height:100%;">
<div class="square greenish" style="left:50px; top:50px;"></div>
<div class="square redish" style="left:70px; top:70px;"></div>
<div class="square bluish" style="left:90px; top:90px;"></div>
</div>
Right now the window.scrollTo(500, 0); command that occurs on page load has no effect (tested in safari and Chrome). But if we replace it instead by the line
setTimeout(function() { window.scrollTo(500, 0); }, 0);
(commented out in the above code), the scroll does happen. Why is this?
I want to check when a transition ends, but it fires twice / multiple times, I want to check only one time when I click the element and call the function, and not again when remove the class, I tried with one(), stopPropagation() or even return false at the end of the function but it didn´t work, how achieve that?
Here is a example:
$(document).ready(function() {
$(document).on("click", ".main", function() {
$(this).addClass('example');
checkEndTransition()
})
function checkEndTransition() {
$(document).on("transitionend webkitTransitionEnd oTransitionEnd MSTransitionEnd", ".main", function() {
$.when($(this)).done(function() {
console.log("Finished")
var val = $(this)
setTimeout(function () {
val.removeClass("example")
}, 1500)
})
})
}
})
.main{
width: 170px;
height: 170px;
background-color: lightgrey;
transition: 1.5s;
}
.example{
width: 250px;
height: 250px;
background-color: #7fff7f;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="main">
<div>
</div>
<div>
$(document).ready(function() {
$(document).on("click", ".main", function() {
$(this).addClass('example');
checkEndTransition();
})
function checkEndTransition() {
var flag = true;
$(document).on("transitionend webkitTransitionEnd oTransitionEnd MSTransitionEnd", ".main", function() {
if(flag){
$.when($(this)).done(function() {
console.log("Finished");
var val = $(this);
setTimeout(function () {
val.removeClass("example");
}, 1500)
})
}
flag = false;
})
}
})
.main{
width: 170px;
height: 170px;
background-color: lightgrey;
transition: 1.5s;
}
.example{
width: 250px;
height: 250px;
background-color: #7fff7f;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="main">
<div>
</div>
<div>
Your problem is $(document).on("transitionend webkitTransitionEnd oTransitionEnd MSTransitionEnd", ".main", function() runs multiple time. You can use a flag to make it run only one time. Use above script and it will work.
It calls it three times because you are animating 3 elements - width, height, and background color. It calls "transitionend, webkitTransitionEnd ect." for each one when they finish.
To avoid this, instead of using transitions, use a keyframe object instead.
I also change the checkEndTransition() function to listen for animation end now instead of transition end...
$(document).ready(function() {
$(document).on("click", ".main", function() {
$(this).addClass('example');
checkEndTransition()
})
function checkEndTransition() {
$(document).on("animationEnd webkitAnimationEnd", ".main", function() {
$.when($(this)).done(function() {
console.log("Finished")
var val = $(this)
setTimeout(function() {
val.removeClass("example")
}, 1500)
})
})
}
})
.main {
width: 170px;
height: 170px;
background-color: lightgrey;
}
.example {
animation: change 1 3s ease;
-webkit-animation: change 1 3s ease;
}
/* Safari 4.0 - 8.0 */
#-webkit-keyframes change {
0% {
width: 170px;
height: 170px;
background-color: lightgrey;
}
50% {
width: 250px;
height: 250px;
background-color: #7fff7f;
}
100% {
width: 170px;
height: 170px;
background-color: lightgrey;
}
}
#keyframes change {
0% {
width: 170px;
height: 170px;
background-color: lightgrey;
}
50% {
width: 250px;
height: 250px;
background-color: #7fff7f;
}
100% {
width: 170px;
height: 170px;
background-color: lightgrey;
}
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="main">
<div>
I have made a page which has a transperant header and a logo in white color.
But when i scroll down my logo isn't visible because of white body color. I want to add black logo when i scroll down. How to do it ?
This is my code. :
$(window).on('scroll', function () {
if ($(this).scrollTop()) {
$('.navbar').addClass("shrink");
//$('.navbar-brand img').attr('src', 'images/logo.png');
}else{
$('.navbar').removeClass("shrink");
//$('.navbar-brand img').attr('src', 'images/logo.png');
}
});
but its not working
You need to add scroll amount. Replace your code with this one.
$(window).on('scroll', function () {
if ($(this).scrollTop() > 70) { // Set position from top
$('.navbar').addClass("shrink");
//$('.navbar-brand img').attr('src', 'images/logo.png');
}else{
$('.navbar').removeClass("shrink");
//$('.navbar-brand img').attr('src', 'images/logo.png');
}
});
Hope It works. Thanks !
Try This:
$(window).scroll(function(){
if($(this).scrollTop()>70) {
$('#header img').attr('src','https://upload.wikimedia.org/wikipedia/commons/thumb/f/fa/Apple_logo_black.svg/600px-Apple_logo_black.svg.png');
}
else {
$('#header img').attr('src','https://www.seeklogo.net/wp-content/uploads/2012/12/apple-logo-eps-logo-vector-400x400.png');
}
})
body {
height: 1500px;
}
#header {
height: 70px;
background-color: #ccc;
position: fixed;
width: 100%;
left: 0;
top: 0;
}
#header img {
width: 50px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<div id="header">
<img src="https://www.seeklogo.net/wp-content/uploads/2012/12/apple-logo-eps-logo-vector-400x400.png">
</div>
Take a look on this, it will help you.
$(function() { var logo = $(".lrg-logo"); $(window).scroll(function() {
var scroll = $(window).scrollTop();
if (scroll >= 500) {
if(!logo.hasClass("sml-logo")) {
logo.hide();
logo.removeClass('lrg-logo').addClass("sml-logo").fadeIn( "slow");
}
} else {
if(!logo.hasClass("lrg-logo")) {
logo.hide();
logo.removeClass("sml-logo").addClass('lrg-logo').fadeIn( "slow");
}
}
});
});
.wrapper {
height: 2000px;
position: relative;
background: green;
}
header {
position: fixed;
width: 100%;
height: 50px;
background: grey;
}
.lrg-logo {
width: 300px;
height: 50px;
text-align: center;
background: red;
}
.sml-logo {
width: 200px;
height: 20px;
text-align: center;
background: red;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="wrapper">
<header>
<div class="lrg-logo">Logo</div>
</header>
</div>
scrollTop will return a value while this line if ($(this).scrollTop()) will look for a boolean value.
So test the value in the loop condition
if ($(this).scrollTop()===someNumber) {
//rest of code
}
I want a full width panel to slide down from the top of the browser, that will display my contact details, along with social links etc:
$(document).ready(function() {
$("#flip").click(function() {
$("#panel").slideToggle();
});
});
#flip {
padding: 5px;
width: 300px;
text-align: center;
background-color: #e5eecc;
border: solid 1px #c3c3c3;
}
#panel {
padding: 50px;
display: none;
width: 100%;
height: 200px;
z-index: 5000;
background-color: black;
}
.f {
position: static;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="panel">Hello world!</div>
<div id="flip">
<span class="f">MENU</span>
</div>
This works a treat, but how can I specify different times for slide up and slidedown?
You can store duration of animation in variable and use it. In function of callback of slideToggle() change duration.
var duration = 500;
$("#flip").click(function() {
$("#panel").slideToggle(duration, function(){
duration = $(this).is(":visible") ? 2000 : 500;
});
});
var duration = 500;
$("#flip").click(function() {
$("#panel").slideToggle(duration, function(){
duration = $(this).is(":visible") ? 2000 : 500;
});
});
#flip {
width: 300px;
text-align: center;
background-color: #e5eecc;
border: solid 1px #c3c3c3;
}
#panel {
display: none;
width: 100%;
height: 150px;
background-color: black;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="panel">Hello world!</div>
<div id="flip">
<span class="f">MENU</span>
</div>
EDIT
I have edit my answer to reflect the change in the question.
Use slideDown() and slideUp() instead.
CODEPEN
http://codepen.io/alexincarnati/pen/PWOPjY
In case you want to add different durations to sliding up and down in jQuery then you can simply add a flag and check if the menu is opened or not and then use slideDown() and slideUp() as methods.
That way you could add different durations to the slide.
$(document).ready(function() {
var menuOpened = false;
$("#flip").click(function() {
if (menuOpened === false) {
$("#panel").slideDown(1000, function() {
menuOpened = true;
});
} else {
$("#panel").slideUp(700, function() {
menuOpened = false;
});
}
});
});
Simply just add the time as a parameter to the slideToggle method.
You can see in the docs this:
slideToggle( [duration ] [, complete ] )
duration (default: 400)
Type: Number or String
A string or number determining how long the animation will run.
complete
Type: Function()
A function to call once the animation is complete, called once per matched element.
$(document).ready(function() {
$("#flip").click(function() {
$("#panel").slideToggle(3000);
});
});
#flip {
padding: 5px;
width: 300px;
text-align: center;
background-color: #e5eecc;
border: solid 1px #c3c3c3;
}
#panel {
padding: 50px;
display: none;
width: 100%;
height: 200px;
z-index: 5000;
background-color: black;
}
.f {
position: static;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="panel">Hello world!</div>
<div id="flip">
<span class="f">MENU</span>
</div>
You can read more in the official documentation here.
UPDATE:
If you want to have different durations for slideUp() and slideDown() methods you can do something like this:
$(document).ready(function() {
var check_state = false;
$("#flip").click(function() {
if (check_state === false) {
$("#panel").stop().slideDown(3000);
check_state = true;
} else {
$("#panel").stop().slideUp(1500);
check_state = false;
}
});
});
#flip {
padding: 5px;
width: 300px;
text-align: center;
background-color: #e5eecc;
border: solid 1px #c3c3c3;
}
#panel {
padding: 50px;
display: none;
width: 100%;
height: 200px;
z-index: 5000;
background-color: black;
}
.f {
position: static;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="panel">Hello world!</div>
<div id="flip">
<span class="f">MENU</span>
</div>
You can specify the time in the first parameter of the function slideToggle:
$("#panel").slideToggle(4000);
You can read about .slideToggle() on jquery documentation
As it say the slideToggle() function accept two parameters:
.slideToggle( [duration ] [, complete ] )
The first is for the duration (in millisecond) and the second is the callback after the animation is complete
$(document).ready(function() {
$("#flip").click(function() {
$("#panel").slideToggle(5000 /* Here is the duration of the animation in MS */, function() {
//Do what you want here
});
});
});
#flip {
padding: 5px;
width: 300px;
text-align: center;
background-color: #e5eecc;
border: solid 1px #c3c3c3;
}
#panel {
padding: 50px;
display: none;
width: 100%;
height: 200px;
z-index: 5000;
background-color: black;
}
.f {
position: static;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="panel">Hello world!</div>
<div id="flip">
<span class="f">MENU</span>
</div>
I would please like an explanation to why the slideshow is not working. Below I have used an interval to perpetually change the slideshow, if userClick is false. The white and squared buttons (made of divs) are set to call upon two functions; slideRight() or slideLeft() and clicked(). When the buttons are clicked however, the clicked() function does not seem to change the variable, based on the data on top of the page.
<body>
<div class="page-wrapper">
<header>
<div class="headContent">
<h1 class="titleText">Slideshow</h1>
<h2 class="subTitleText">A slideshow made with JavaScript.</h2>
<p>userClick <span id="uc"></span></p>
</div>
<nav>
<ul>
<li>Home</li>
<li>About</li>
<li>Gallery</li>
</ul>
</nav>
</header>
<div class="body-wrapper">
<h1 class="titleText">Slideshow</h1>
<div id="slideshow">
<div id="leftSlide" onclick="leftSlide(); clicked()"></div>
<div id="rightSlide" onclick="rightSlide(); clicked()"></div>
</div>
<p>The image is not invoked by a tag, but invoked by the background property using Javascript.</p>
</div>
<footer>
<p id="footerText">© 2017 <br>Designed by JastineRay</p>
</footer>
</div>
<script language="javascript">
// Slide function
var slide = ["minivan", "lifeinthecity", "sunsetbodyoflove"];
var slideTo = 1;
window.onload = getSlide();
// Previous Image
function leftSlide() {
if (slideTo != 0) {
slideTo = slideTo - 1;
} else if (slideTo == 0) {
slideTo = slide.length - 1;
} else {
alert('SLIDE ERROR');
}
getSlide();
}
// Next Image
function rightSlide() {
if (slideTo != (slide.length - 1)) {
slideTo = slideTo + 1;
} else if (slideTo == (slide.length - 1)) {
slideTo = 0;
} else {
alert('SLIDE ERROR');
}
getSlide();
}
function getSlide() {
imageURL = 'url(images/' + slide[slideTo] + '.jpg)';
document.getElementById("slideshow").style.backgroundImage = imageURL;
}
// Interval Slideshow & Check if user clicked (timeout)
var userClick = false;
window.onload = slideInterval(5000);
// Start Slideshow
function slideInterval(interval) {
while (userClick = false) {
setInterval(function() {
rightSlide();
}, interval)
}
}
// Stop Slideshow and start timeout
function clicked() {
userClick = true;
setTimeout(function() {
userClick = false;
slideInterval();
}, 2000)
}
window.onload = function() {
setInterval(document.getElementById("uc").innerHTML = userClick), 100
}
</script>
</body>
CSS coding below.
* {
margin: 0;
padding: 0;
}
.page-wrapper {
width: 100%;
}
// Class Styling
.titleText {
font-family: monospace;
font-size: 40px;
}
.subTitleText {
font-family: monospace;
font-size: 20px;
font-weight: normal;
}
// Header Styling
header {
height: 500px;
}
.headContent {
margin: 30px 7%;
}
// Navigation Styling
nav {
overflow: hidden;
}
nav ul {
background: black;
background: linear-gradient(#595959, black);
list-style-type: none;
font-size: 0;
padding-left: 13.33%;
margin: 40px 0;
}
nav ul li {
padding: 15px 20px;
border-right: 1px solid #595959;
border-left: 1px solid #595959;
color: white;
display: inline-block;
font-size: 20px;
font-family: sans-serif;
}
// Body Styling
.body-wrapper {
}
.body-wrapper > .titleText {
text-align: center;
font-size: 50px;
}
#slideshow {
overflow: hidden;
margin: 20px auto;
border: 2px solid blue;
height: 350px;
max-width: 800px;
background-size: cover;
background-position: center;
position: relative;
}
#leftSlide {
position: absolute;
left: 40px;
top: 175px;
background-color: white;
height: 40px;
width: 40px;
}
#rightSlide {
position: absolute;
left: 100px;
top: 175px;
background-color: white;
height: 40px;
width: 40px;
}
// Footer Styling
Try changing the checking part to:
window.onload = function() {
setInterval(function () {
document.getElementById("uc").innerHTML = userClick;
}, 100);
}
The first argument of setInterval has to be a function (something that can be called), not a generic piece of code.