How can I make each of them to fadeInUp but in sequence?
demo http://jsfiddle.net/uz2rm8jy/4/
HTML
<div class="c one"></div>
<div class="c two"></div>
<div class="c three"></div>
My js
$(function() {
$('.c').each(function(i) {
$(this).delay((i++) * 150).addClass('fadeInUp'); })
});
You can achieve that by using jquery's fadeTo using exactly the same logic you have already in place...
$(function() {
$('.c').each(function(i) {
$(this).delay((i++) * 150).fadeTo(500,1); })
});
$(function() {
$('.c').each(function(i) {
$(this).delay((i++) * 150).fadeTo(500,1); })
});
.one,.two,.three {
height: 50px;
background: #dddddd;
width: 50px;
border-radius: 50%;
display:inline-block;
margin: auto 10px;
opacity:0;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min.js"></script>
<div class="c one"></div>
<div class="c two"></div>
<div class="c three"></div>
The question is about Animate.css library but the answers are not help with animate.css, I had the same problem and solved it finally. see below fiddle.JSFiddle
code:
Html Example
<div class="content">
<div class="firstanimation">
<h1 data-animation="fadeInUp" style='display: none'>
This is Title
</h1>
</div>
<div class="secondanimation">
<p data-animation="wobble" style='display: none'>
This is Description
</p>
</div>
<div class="lastanimation">
<p data-animation="bounce" style='display: none'>Link</p>
</div>
</div>
Jquery:
// With Queue
function animate2(queue) {
if (queue && queue.length > 0) {
var elm = queue.shift();
var animClass = "animated " + $(elm).data('animation');
$(elm).show().addClass(animClass)
.on('webkitAnimationEnd mozAnimationEnd MSAnimationEnd oanimationend animationend', function() {
$(elm).removeClass();
animate2(queue);
});
}
};
$(function() {
var animationQueue = [
$('.content').find('.firstanimation h1'),
$('.content').find('.secondanimation p'),
$('.content').find('.lastanimation p')
];
animate2(animationQueue);
});
There are two options for you.
Transition end events, which can be fired with JavaScript
Transition delays
Transition end events can be listened for on any element that has a transition. You can fire a function when the transition ends like this:
element.addEventListener( "transitionend", function() {
// run code here to add class on next element
});
You'll have to make sure to add the necessary prefixes, but jQuery can assist. This is easily achieved in a for loop.
The other alternative with no extra JS or transition end events would be to delay the transitions of .c.two and .c.three by the length of the actual transition (and two times that for .c.three). You can add this directly in the CSS by using the transition-delay property on the respective elements.
I hope this helps.
I'm not sure what you meant, basing on your code, you just wanted to add the class 'fadeInUp' to your divs. But try this maybe it will help.
function fade(e){
$(e+":not(:visible):first").fadeIn(function(){
fade(e);
});
}
to use the function just pass the class 'c' as an argument:
eg.
fade('.c');
Related
I can't make my jQuery function work on individual elements. My function is a slider. When I put one slider to my html, it works fine, without problems. But whenever I try to put a second slider, it doesn't work properly. The first slider controls both of them, then the second slider takes the charge if I click right arrow too much etc.
Here is my jQuery code:
$('.right-arrow').click(function () {
var currentSlide = $('.slide.active');
var nextSlide = currentSlide.next();
currentSlide.fadeOut(300).removeClass('active');
nextSlide.fadeIn(300).addClass('active');
if (nextSlide.length == 0) {
$('.slide').first().fadeIn(300).addClass('active');
}
});
$('.left-arrow').click(function() {
var currentSlide = $('.slide.active');
var prevSlide = currentSlide.prev();
currentSlide.fadeOut(300).removeClass('active');
prevSlide.fadeIn(300).addClass('active');
if (prevSlide.length == 0) {
$('.slide').last().fadeIn(300).addClass('active');
}
});
And this is where I use it:
<style>
.slide {
display:none;
}
.slide.active {
display:block;
}
</style>
<div class="slider-container">
<div id="slider1">
<div class="slide active">#1</div>
<div class="slide">#2</div>
<div class="slide">#3</div>
</div>
<p class="left-arrow"><</p>
<p class="right-arrow">></p>
</div>
<div class="slider-container">
<div id="slider2">
<div class="slide active">#a</div>
<div class="slide">#b</div>
<div class="slide">#c</div>
</div>
<p class="left-arrow"><</p>
<p class="right-arrow">></p>
</div>
Like I said previously, when I click the first slider's right arrow, first slider's #2 and second slider's #b shows up.
You are getting this behavior because of the line
var currentSlide = $('.slide.active');
which selects all elements with the classes slide and active. try replacing that line with something like this:
var currentSlide = $(this).parent().find('.slide.active');
What this is doing is selecting the element the event was fired on $(this). Then getting the parent of that element, then finding the active slide within that element.
EDIT
Here is an example of your first if statement. Once again, you are getting the parent of the element that caused the event, then searching inside that dom element for all of the elements with a class of 'slide'.
As a side note you might want to make $(this) a variable something like var $this = $(this). Then use $this instead of $(this). It's a performance issue that you may or may not be concerned with.
if (nextSlide.length == 0) {
$(this).parent().find('.slide').first().fadeIn(300).addClass('active');
}
As other answers and comments mentioned, you are searching the .slide elements on the whole document. Instead you need to limit the search inside the related .slider-container element. For this purpose, you can use JQuery.closest(). Also, it will be nice to wait the fadeOut animation to finish using the complete callback function before showing the new .slide element. You can take next example as reference of implementation:
$('.right-arrow').click(function()
{
var container = $(this).closest(".slider-container");
var currSlide = container.find('.slide.active');
var nextSlide = currSlide.next(".slide");
if (nextSlide.length === 0)
nextSlide = container.find('.slide:first-child');
currSlide.fadeOut(300, function()
{
$(this).removeClass('active');
nextSlide.fadeIn(300).addClass('active');
});
});
$('.left-arrow').click(function()
{
var container = $(this).closest(".slider-container");
var currSlide = container.find('.slide.active');
var prevSlide = currSlide.prev(".slide");
if (prevSlide.length === 0)
prevSlide = container.find('.slide:last-child');
currSlide.fadeOut(300, function()
{
$(this).removeClass('active');
prevSlide.fadeIn(300).addClass('active');
});
});
.slide {
display:none;
}
.slide.active {
display:block;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="slider-container">
<div id="slider1">
<div class="slide active">#1</div>
<div class="slide">#2</div>
<div class="slide">#3</div>
</div>
<p class="left-arrow"><</p>
<p class="right-arrow">></p>
</div>
<div class="slider-container">
<div id="slider2">
<div class="slide active">#a</div>
<div class="slide">#b</div>
<div class="slide">#c</div>
</div>
<p class="left-arrow"><</p>
<p class="right-arrow">></p>
</div>
I have a very simple script to switch out divs. I would like to add in a fading transition to the script so that it is a bit smoother. However I cannot see what I am doing wrong (totally JS incompetent)
Thanks for any advice.
jQuery(document).ready(function( $ ) {
$('#div2, #div3').hide();
$('.show').click(function () {
$('.targetDiv').hide().fadeOut(1000);
$('#div' + $(this).attr('target')).show();
});
});
Your problem lies in this line: $('.targetDiv').hide().fadeOut(1000);
What is does - it sets style display: none; to all your elements you plan to cross-fade.
Also use the right attributes: data-target="#div1" instead of target="#div1" (which is not used for that purpose)
Instead:
jQuery(function($) { // DOM ready
// get all your targetDiv elements
var $fadeDivs = $(".targetDiv");
// Hide all but this one
$fadeDivs.not("#div1").hide();
$('.show').click(function(evt) {
// prevent the browser doing default stuff
evt.preventDefault();
// get the target element - using data-target attribute!
var selector = $(this).data('target');
var $target = $( selector );
// crossfade (don't forget to use .stop())
$fadeDivs.not($target).stop().fadeOut(1000);
$target.stop().fadeIn(1000);
});
});
.targets{ position:relative; height:100px; }
.targetDiv { position:absolute; height:100px; top:0; left:0;}
<div class="targets">
<div id="div1" class="targetDiv"><img src="//placehold.it/100x100/0bf"></div>
<div id="div2" class="targetDiv"><img src="//placehold.it/100x100/f0b"></div>
<div id="div3" class="targetDiv"><img src="//placehold.it/100x100/bf0"></div>
</div>
<a data-target="#div1" class="show">SHOW1</a>
<a data-target="#div2" class="show">SHOW2</a>
<a data-target="#div3" class="show">SHOW3</a>
<script src="//ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
I have an link that when clicked, has to show 2 other links.
But when I click my link, nothing happends. Really nothing.
I have loaded in jquery before I have my script.
This is my jquery script:
$("#imd").toggle(function(){
$("#anw").animate({opacity:1},200);
$("#3d").animate({marginTop:75}, 200);
},function(){
$("#anw").animate({opacity:0},200);
$("#3d").animate({marginTop:0}, 200);
});
This is my CSS:
#anw {
width: 50%;
background-color: #0f0;
opacity: 0;
}
And this is my HTML markup
<div class="mid">
<h1>Interactive Media Design</h1>
<div id="anw"><br><a class="left" href="website.html">Apps</a><a class="right" href="website.html">Websites</a></div>
<hr>
<h1 id="3d"><a href="#">3D Modelling</h1>
</div>
<div class="bottom">
<h1>Contact and about me</h1>
</div>
My apologies if this is a very dumb question, but I have no clue.. Also the documentation I can find is not filling my needs.
You need to work with a click handler:
$("#imd").click(function(){
$("#anw").toggle(function(){
$(this).animate({opacity:1},200);
}, function() {
$(this).animate({opacity:0},200);
});
$("#3d").toggle(function() {
$(this).animate({marginTop:75}, 200);
},function() {
$(this).animate({marginTop:0}, 200);
})
});
See the Fiddle: https://jsfiddle.net/8Lpvty1w/
Working fiddle for what you want to do: https://jsfiddle.net/rr9Lvjgh/
Essentially:
$("#imd").on('click', function(){
// code to change stuff here
});
I am still learning JavaScript/jQuery and I'm trying to open and close divs with the least amount of verbiage, I'm trying to break free of the habit of repeating myself because its easier to code.
$(document).ready(function() {
$(function () {
$('#section-two, #section-three').css('display', 'none');
$('.section-opener').function (e) {
e.preventDefault();
var target = $(this).data("target");
var $target = $(target);
$('.section').not($target).stop(true, true).css('display', 'none');
$target.stop(true, true).css('display', 'block');
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<h4>Section One</h4>
<div class="section" id="section-one">
<p>I am inside section one</p>
</div>
<h4>Section Two</h4>
<div class="section" id="section-two">
<p>I am inside section two</p>
</div>
<h4>Section Three</h4>
<div class="section" id="section-three">
<p>I am inside section three</p>
</div>
I'm not having any luck as currently none of it is working.
Your code is very confusing and it looks incorrect as well.
When you mention closing and opening it seems like you mean show and hide instead of what is normally considered "closing", i.e. </div>
Also, it appears you are using JavaScript to set the initial display where you should be using CSS:
<style>
#section-two, #section-three{
display: none;
}
</style>
Your .stop() and .function() and target, $target all serve to make your code very difficult to understand. I suggest reading some tutorials to understand the basics, because it appears you do not understand the code you're writing.
Also, perhaps you are looking for $().show() and $().hide() functions? Those perform the display:block and display:none shortcuts.
I created a jsfiddle which does what I think you wanted:
http://jsfiddle.net/48xuvL6y/1/
JS:
$(document).ready(function () {
$('.section-opener').on('click', function (e) {
e.preventDefault();
var target = $(this).data("target");
$('.section').hide();
$(target).show();
});
});
CSS:
.section {
display: none;
}
I'm having some slight problems with fading one div into another, here's my code (and test page):
HTML:
<div id="grid">
<div class="grid-box">
<div class="phase-1">
<img class="grid-image" src="http://teamworksdesign.com/v2/wp-content/themes/default/images/dtr.jpg" alt="" height="152" width="210" />
<div class="grid-heading">
<h2>DTR Medical</h2>
<h3>Branding, Web, Print</h3>
</div>
</div>
<div class="phase-2">
<div class="grid-info">
<h4>Probeything 2000</h4>
<p>Marketing unglamorous single-use medical intruments is not simple. We helped Neurosign increasetheir sales by 25% and increasemarket awareness.</p>
</div>
<div class="grid-heading-hover">
<h2>DTR Medical</h2>
<h3>Branding, Web, Print</h3>
</div>
</div>
</div>
</div>
Javascript:
<script type="text/javascript">
$(document).ready(function(){
$(".phase-2").hide();
});
$(function(){
$('.grid-box').hover(
function(){
$('.grid-box .phase-1').fadeOut(200, function(){
$('.grid-box .phase-2').fadeIn(200);
});
},
function(){
$('.grid-box .phase-2').fadeOut(200, function(){
$('.grid-box .phase-1').fadeIn(200);
});
}
);
});
</script>
CSS:
.phase-1 .grid-image {
width:210px;
height:220px;
overflow:hidden;
}
.phase-2 {
position:relative;
top:-220px;
}
UPDATE:
I have one "working" (see test link in question). Is it possible to stop it fading to white then fading in the next phase? I want to fade the two div into each other rather than to white first.
If you type $ on the console, it answer undefined, so it probably was redefined by some other script. To use $ meaning jQuery again, use the following syntax
$(document).ready(function($) {
// $ means jQuery again in here
});
Notice the $ as the first argument of the function call.
Documentation here.