I'm quite new at Angular and I am trying to create a small fadeIN/OUT animation for lists.
I have two lists, which i can toggle with a button on the top of the page. When a new list is coming, there is a small animation for fade-in and fade-out.
Please see following Plunker:
https://plnkr.co/edit/A8Aozfq2fHuUKQFaJm7l?p=preview
My problem is, that i want a "serial workflow". So when the first list is hided, then should come the second one - At the moment, there is a "parallel workflow". So how can i change that ?
Try increasing transition time. It can help.
Related
I am using cubeportfolio to get masonry filterable portfolio. Worked like a charm, but then I wanted to add a toggle inside the cbp-item.
This is the result (watch it on mobile): http://www.lichaamengeest.be/AA.php
You can see that, when toggling the content in the first cbp-item, the content comes up behind the cbp-item below, instead of the toggle content pushing the next cbp-item downwards. The height is not set fixed, so it should move freely.
The coder of cubeportfolio told me to add this code
jQuery('.cbp').cubeportfolio('layout'); But my unanswered question is: where and how to add that code? Here's the js file with toggle code: http://www.lichaamengeest.be/scripts/custom.js
I think your problem is the „position: absolute” on the „.cbp-item”. If you wrote the toggle function on your own try to get the height of the box and add this as new position for the following box, when you click on to toggle. So that it's recalculated it after every click.
I'm trying to create a custom carousel. The way it works is that the items are contained in two "piles", both piles contain the same items.
When you click the "next" button, the topmost item from the second pile moves to the top of the first pile. The last item in the first pile will then move to the bottom of the second pile, meaning both piles always contain the same number of items.
When clicking the "prev" button it needs to perform the reverse animation.
When moving items from the second pile to the first, this needs to happen with an animation.
I created a fiddle here https://jsfiddle.net/n109rpp0/3/ with the HTML I have produced so far, but I am struggling to work out a way to do the animation.
I'm not sure if I've taken the right approach, e.g. by having the items duplicated in two ul elements. Also how do I ensure the items are cycled in the correct order?
Does anyone have any ideas on how I should go about this?
Here is a quick idea how to achieve what you want. Add this:
$(prevItem).animate({left: '-345px', top: '-30px', width: '+=50px', height: '+=50px'});
$(prevItem).css('zIndex', '1');
to your next button functionality.
You need to play with the code to make perfect transition.
Here is an updated fiddle
Google animate function for jQuery and you will find more examples
How do I change content of image elements similarly to changing content in p (HTML paragraph) elements? (refer to: http://www.w3schools.com/jquery/html_html.asp)
I would like to have a scatter+sort effect button next to a default carousel view of images that when clicked, will, as you might have already guessed, scatter and sort itself in a stationery template.
Also, having the button change when clicked to flip between "Scatter+Sort" and "Carousel" views.
Here is what I have so far:
Carousel view - https://gyazo.com/18e67f7347de3310d155c0b8624b3716
Stationary view - https://imgur.com/a/coreG
What I intend on doing is following a similar approach to Jennifer Dewalt's a project a day for 180 days, except I am doing 100 projects in an indefinite time period.
Update: I got a button to bring up an image, but the container of images (carousel) is still on the page and does not vanish upon button click. Also, the image is shown as not available on the top left of screen before button click.
Update 2: Something I am looking into: https://www.w3schools.com/css/css3_animations.asp . Animation iteration count of 1. I'm thinking maybe, if it's possible, to rewrite the container class (carousel) in css then pulling the code in an html file, so that way I can manipulate the elements within the container.
document.getElementById("myImg").setAttribute("src", "my-new-image-source.jpg");
http://www.w3schools.com/jsref/met_element_setattribute.asp
I have been trying to trigger two animations placed at two different places simultaneously to move them away from each other via JavaScript - {{id}}.className. But as soon as the animation begins, the second element with id - p2 displaces automatically from its original position just before the animation starts.
Here is my Codepen link. And yeah, I'm using Bootstrap with this.
Can anyone help me out?
UPDATED
You remove all the class values from your two divs when you click on button.
So just replace :
e2.className = "pop2";
e1.className = "pop1";
By :
e2.classList.add('pop2');
e1.classList.add('pop1');
That will add the new class (pop1 and pop2) to the others existing by default (col-sm-7 and col-sm-5) and it work perfectly.
In my simple javascript slide show I just want it to cycle through (at max of 5) divs that auto populate from a database. It populates and starts doing the slide show fine, but once it is suppose to loop it goes to a "blank" slide, then to the last one again and the it start cycling normally forever.
With this example I have to look at and play with it I am using two divs.
It can be viewed here: www.codekrewe.com/fbla
and the javascript code is here:
$(function() {
$('#dateHolder .featureHolder:gt(0)').hide();
setInterval(function() {
$('#dateHolder .featureHolder:first').fadeOut(1000)
.next('.featureHolder').fadeIn(1000)
.end().appendTo('#dateHolder');
}, 3000);
});
EDIT: I changed the JavaScript, the JS in the code block above is what I have now. However, I get the same problem.
Now with three divs in the slideshow you can see it is just the first slide that gets blanked out on the second loop through.
Well I found the fix for this, not quite sure why it had such an effect.
After all of the divs were called, a little <h1> was made to say featured divs in the holding box. Well that was getting pushed up with each slide changing, and once it reached the top it caused a blank slide.
So moving the <h1> to the top before the divs were called, fixed the blank slide issue.