JSFIDDLE: http://jsfiddle.net/mh7e8/1/
I have 3 images I want to add a .animation class to so that they reveal with a bounce:
<div class="row">
<div class="col-sm-4 steps">
<img src="./s3/img/sprite-circle-1.png" class="step-1 bounceIn">
</div>
<div class="col-sm-4 steps">
<img src="./s3/img/sprite-circle-2.png" class="step-2 bounceIn">
</div>
<div class="col-sm-4 steps">
<img src="./s3/img/sprite-circle-3.png" class="step-3 bounceIn">
</div>
</div>
I already have a very nice (working) CSS3 animation:
.animated.bounceIn{
// code: see JSFIDDLE - http://jsfiddle.net/mh7e8/1/ for detail
}
I want the class to apply to each image, with a 1 second delay between them, when the first image loads on the screen.
I have the code to determine when the element is visible (working):
(function ($) {
$.fn.isVisible = function (partial, hidden, direction) {
// working code: see JSFIDDLE - http://jsfiddle.net/mh7e8/1/ for detail
})(jQuery);
$(function () {
var $bounceIn = $('.step-1');
var testVis = function () {
$bounceIn.each(function () {
if ($(this).isVisible()) {
console.log("step-1 visible");
}
});
};
$(window).on('scroll resize', testVis);
testVis();
});
Where I am struggling is to find how to delay each animation sequentially. Applying a delay to the CSS transition doesn't seem to invoke consistent behaviour accross browsers (e.g. step-2 can load before step 1). How can I queue this in jQuery?
You can define the CSS animations and attach them to specific classes.
CSS
.slideUp {
animation: slide-up 1500ms ease;
}
JQUERY
/* these are the classes you want to animate */
toAnimate = ['step1', 'step2', 'step3']
/* iterate over this array and apply the *slideup* class */
$.each(toAnimate, function(i, class) {
window.timeout(function {
$('.parent').find(class).addClass('slideUp')
}, i*1000);
}
Now, just use jQuery to add those classes to the elements at the appropriate times (for example, with a delay of 1 second, add the .slideUp class to the four images, etc)
Related
I want creating a website with some small news on the start-page. I show only the pics and show the headline and a small sentence with an hover-effect. Unfortunately I have no experience with jQuery and my code doesn't work.
$(document).ready(function () {
$(this).removeClass("#news-container .newscontent")
});
$(document).ready(function () {
$("#news-container img").hover(function () {
$(this).addClass("#news-container .newscontent");
}, function () {
$(this).removeClass("#news-container .newscontent");
}
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
If you want to toggle some class or the visibility of some childs with jquery the dom stucture is key. Let's assume you got the following structure:
<div class="newscontent">
<img class="image" src="...">
<div class="text">Some text</div>
</div>
The following code registers for the hover event on every image within an element with a newcontent class. The image with the hover $(this) searches for the next element with a text class and toggles the visibility.
$('.newscontent img').hover(function(){
if ( $(this).next('.text').css('visibility') === 'visible' ){
$(this).next('.text').css('visibility', 'hidden');
}else{
$(this).next('.text').css('visibility', 'visible');
}
});
You can find a full working example here:
https://jsfiddle.net/3xy8ar96/1/
I have 3 nav buttons that, when hovered over, open a menu underneath. I want to add a timer when then mouse leaves the button so it doesn't close right away after opening. It bugs out a bit then. This is my starter code in jquery, for opening the drop-menu
$('.info').hover(function () {
$('.d-skills').show(500);
$('.d-info').hide(500);
$('.d-exp').hide(500);
});
If I add this code in it breaks and nothing works
function(){ t = setTimeout(function(){$('.d-info').hide(500)}, 500;)
}
Also, i add
var t;
on the very beggining, and i separate the functions with a ','.
'd-info' is the class for the drop menu, and 'info' is the button class
You can use handlerOut function for hover.
Below is a simple snippet that demonstrates this and hides the sections after a 1.5 second delay.
$('.info').hover(function () {
$('.d-sections').show(500);
}, function() {
setTimeout(function() {
$('.d-sections').hide(500);
}, 1500);
});
.d-sections {
display: none;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="info">
Hover here for more Information!
<div class="d-sections">
<div class="d-skills">
The D Skills section!
</div>
<div class="d-info">
The D Info section!
</div>
<div class="d-exp">
The D Exp section!
</div>
</div>
</div>
https://jsfiddle.net/32bekom9/1/
I'm adding animation to show a hidden div when a checkbox is changed,
The first time it's clicked the div appears with no animation but it works both ways after the first time.
How can I make it work also on the first time?
Here is my div (also using bootstrap)
var postOptionsSourcesWrapper = $("#post-options-sources-wrapper");
var postOptionsExclusiveCheckbox = $("#post-exclusive-cb");
postOptionsExclusiveCheckbox.change(function() {
if ($(this).is(":checked")) {
postOptionsSourcesWrapper.slideUp(300, "easeOutCirc", function() {
postOptionsSourcesWrapper.addClass("hidden");
});
} else {
postOptionsSourcesWrapper.removeClass("hidden");
postOptionsSourcesWrapper.slideDown(300, "easeOutCirc");
}
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="post-options-sources-wrapper" class="margin-b-5 hidden">
<label class="text-md thick-600">Original post references</label>
<div class="box-marker box-marker-white">
<div class="thick-600 color-gray text-sm text-uppercase">
Add one or multiple sources.
</div>
</div>
</div>
UPDATE: this issue is solved by adding display:none; to the div
When adding the bootstrap class .hidden to hide for some reason it's not adding the display:none; that is part of the .hidden class in bootstrap... not sure why, but adding the style display:none; or calling postOptionsSourcesWrapper.hide() solves this issue.
This code will achieve what you want to achieve.
You just have to replace your script with this one.
var postOptionsSourcesWrapper = $("#post-options-sources-wrapper");
var postOptionsExclusiveCheckbox = $("#post-exclusive-cb");
postOptionsSourcesWrapper.hide();
postOptionsExclusiveCheckbox.change(function() {
postOptionsSourcesWrapper.slideToggle(300,postOptionsSourcesWrapper.is(":checked"));
});
How can I make my inline styled div to change it background image url after 5 second?
Example:
<div class="foobar" style=" background:(url'red.png')"> </div>
After 5 seconds, it need to be:
<div class="foobar" style=" background:(url'blue.png')"> </div>
and After 5 seconds, it need be:
<div class="foobar" style=" background:(url'yellow.png')"> </div>
So, It can cycle 3 images in this foobar, Red, Blue and Yellow background images.
Here is what I tried so far: Working fiddle
You have to use setInterval() instead :
setInterval(nextBackground, 5000);
If you want smooth fade in use the fadeIn() function :
imagrep.hide().fadeIn();
NOTE : fadeIn() works only on hidden elements that why we have to hide the element first.
Hope this helps.
$(function() {
var imagrep = $('.foobar');
var backgrounds = ['url(http://images.huffingtonpost.com/2016-03-02-1456944747-2376497-naturehike.jpg)', 'url(http://www.mindful.org/wp-content/uploads/2016/03/nature.jpg','url(http://www.planwallpaper.com/static/images/3d-nature-wallpaper1.jpg)'];
var current = 0;
function nextBackground() {
imagrep.css('background',backgrounds[current]);
imagrep.hide().fadeIn();
if(current==backgrounds.length-1)
current=0;
else
current++;
}
setInterval(nextBackground,2000);
});
.foobar {
height: 400px;
width: 100%;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="foobar" style="background:url(http://www.planwallpaper.com/static/images/3d-nature-wallpaper1.jpg);">
</div>
You can't animate the background-image (or background with an image) property, but you can get a similar effect like this :
imagrep.animate({opacity: 0}, 'slow', function() {
imagrep.css({'background-image': backgrounds[current = ++current % backgrounds.length]}).animate({opacity: 1});
});
This animate the opacity to 0, then change the image, and finally animate the opacity to 1.
Here is a jsfiddle: http://jsfiddle.net/m61u51xt/3/
The best way is to use jquery Cycle plugin.
You can download it from
http://jquery.malsup.com/cycle/
It's open source and easy to impliment and in addition you can add various effect like fadein, zoom and suffle etc.
I'm looking to use jQuery to slide an element down, wait, then slide it back up.
When I use the following code, it slides down fine, but then when sliding back up it seems to slide up and down multiple times.
HTML:
<div id="area">
<div id="summary"><p>hello summary</p></div>
<div id="dropdown">
<div class="item"><p>hello item</p></div>
<div id="functions"><p>hello functions</p></div>
</div>
</div>
<p>TEST ADD</p>
jQuery:
$("document").ready( function () {
$("#test_add").bind("click", add_item_annimate)
})
function add_item_annimate() {
$("#dropdown").slideDown("fast").delay(1500).slideUp("fast");
}
Not really sure why this is happening.
That's probably because of animation queue, for clearing it you can use the stop method:
$("#dropdown").stop(true).slideDown("fast").delay(1500).slideUp("fast");
This code should do the trick!
$("document").ready( function () {
$("#test_add").click( function(){
$("#dropdown").slideUp("fast").delay(1500).slideDown("fast");
//SlideUp and slideDown can be switched.
});
});
Example:
http://jsfiddle.net/xcm8n1s3/
You didn't have anything preventing a user from clicking on "TEST ADD" multiple times before the animation completed.
if ($("#dropdown").is(':animated')) {
return false;
}
$("#dropdown").slideDown("fast").delay(1500).slideUp("fast");
Here is a jsfiddle of the working demo.