I have forward and backward buttons for an image gallery. Currently, they fade away when the mouse is idle. Any movement on the page will show them again. Here's the code:
//fade out previous/next buttons on mouse idle
var timer;
$(document).mousemove(function() {
if (timer) {
clearTimeout(timer);
timer = 0;
}
$('.fader').fadeIn();
timer = setTimeout(function() {
$('.fader').fadeOut(1500)
}, 1000)
})
This works fine, but I also would like the buttons to not fade out at all if they are currently being hovered.
As a test, I've tried this code:
//both buttons are stored in class .fader
//when buttons are hovered over
$(".fader").hover(
function(){
//give them this class
$(this).toggleClass('is-hover');
})
//if buttons have .is-hover class, print test statement to console
if($(".fader").hasClass('is-hover')){
console.log("true");
}
I'm hoping to see the test "true" statement printed to the console, but it's not happening.
Ultimately, I'd like to wrap the first function in the second. If buttons are not being hovered over, then perform this timed fadeout of buttons.
Here is where the buttons are in the HTML:
<!-- Swiper -->
<div ng-show="show" class="swiper-container">
<div class="swiper-wrapper"></div>
<div class="swiper-pagination"></div>
<!--The buttons-->
<div class="swiper-button-next fader"></div>
<div class="swiper-button-prev fader"></div>
</div>
You can use CSS for the button hovering...
But to track mouse movement on the document, a script is needed.
You can use both! ;)
// To track mouse movement and fadein all buttons
var timer;
$(document).on("mousemove",function(){
$(".fader").addClass("faderShowOnMouseMove");
if(typeof(timer)!="undefined"){
clearTimeout(timer);
}
timer = setTimeout(function(){
$(".fader").removeClass("faderShowOnMouseMove");
},1000);
});
/* Base style for buttons */
.fader {
opacity: 0;
transition: opacity 1s ease-in-out;
-moz-transition: opacity 1s ease-in-out;
-webkit-transition: opacity 1s ease-in-out;
}
/* For single button hovering */
.fader:hover {
opacity: 1;
}
/* Used with JS mouse movement */
.faderShowOnMouseMove{
opacity: 1;
}
/* Just for this demo ;) */
.swiper-pagination{
border:1px solid black;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<!-- Swiper -->
<div ng-show="show" class="swiper-container">
<div class="swiper-wrapper">
Hover over here! <i>(right below this text)</i><br>
<div class="swiper-pagination">
<!--The buttons-->
<button class="fader">1</button>
<button class="fader">2</button>
<button class="fader">3</button>
</div>
</div>
</div>
Related
I have a div with 12 buttons. Each one has eventListeners for mouseenter(). When user rolls over a button, the other 11 buttons fade out. I've got enough code to make your eyes bleed. But I'm having trouble consolidating it all into one function, and just using event.target.
I can get the basics going, but am having problems inserting a for loop (with a continue needed, I believe) to fade out each of the other buttons, not including the one that is being hovered over (my event.target element). You can see in my code, that currently I have a line of code for each of the other buttons, to run an opacity fade loop on them. How can I consolidate this into a single function?
Here is the code I'm running each time a button gets rolled over:
function fadeOut01() {
var op = 1; // initial opacity
var timer = setInterval(function () {
if (op <= 0.1){
clearInterval(timer);
}
box02.style.opacity = op;
box03.style.opacity = op;
box04.style.opacity = op;
box05.style.opacity = op;
box06.style.opacity = op;
box07.style.opacity = op;
box08.style.opacity = op;
box09.style.opacity = op;
box10.style.opacity = op;
box11.style.opacity = op;
box12.style.opacity = op;
op -= op * 0.1;
}, 20);
}
And here is the html where I define the boxes:
<div id="grid01" class="grids"><div class="gridText">video</div></div>
<div id="grid02" class="grids"><div class="gridText">broadcast</div></div>
<div id="grid03" class="grids"><div class="gridText">graphics</div></div>
<div id="grid04" class="grids"><div class="gridText">digital signage</div></div>
<div id="grid05" class="grids"><div class="gridText">3d</div></div>
<div id="grid06" class="grids"><div class="gridText">virtual sets</div></div>
<div id="grid07" class="grids"><div class="gridText">print</div></div>
<div id="grid08" class="grids"><div class="gridText">technical direction</div></div>
<div id="grid09" class="grids"><div class="gridText">live events</div></div>
<div id="grid10" class="grids"><div class="gridText">photography</div></div>
<div id="grid11" class="grids"><div class="gridText">workflow automation</div></div>
<div id="grid12" class="grids"><div class="gridText">our clients</div></div>
If I understand your question correctly, this should be solvable via the following - please see the comments below for contextualized information on how this works:
/* Query all grids of the grid-wrapper and apply same hover behavior to each */
document.querySelectorAll('.grid-wrapper .grids').forEach(function(element) {
/* Get the grid wrapper that encloses the grid element */
const gridWrapper = document.querySelector('.grid-wrapper');
/* Add mouse over event and add hover classes for both the wrapper and
grid elements */
element.addEventListener('mouseover', function() {
element.classList.add('hover');
gridWrapper.classList.add('hover');
});
/* Add mouse out event and remove hover classes for both the wrapper and
grid elements */
element.addEventListener('mouseout', function() {
element.classList.remove('hover');
gridWrapper.classList.remove('hover');
});
});
.grid-wrapper .grids {
/* Set default opacity for grid-wrapper grids */
opacity: 1;
/* Specifcy the transition behavior for opacity property of .grids.
Transition will take .35s and be delayed by .1s to reduce flickering
when moving quickly between grids */
transition: opacity 0.35s linear 0.1s;
/* Extra styles just added for presentation */
display: inline-block;
width: 150px;
height: 100px;
background: grey;
margin: 10px;
}
/* When .hover modifier class is applied to the wrapper, cause the
children (.grids) to fade out by default (we'll prevent/override this
default behavior for the actual grid child being hovered to achieve
the desired final result) */
.grid-wrapper.hover .grids {
opacity: 0.1;
}
/* Override the default grid-wrapper hover for the actual grid being
hovered to ensure
that it is still visible */
.grid-wrapper.hover .grids.hover {
opacity: 1
}
<div class="grid-wrapper">
<div id="grid01" class="grids">
<div class="gridText">video</div>
</div>
<div id="grid02" class="grids">
<div class="gridText">broadcast</div>
</div>
<div id="grid03" class="grids">
<div class="gridText">graphics</div>
</div>
<div id="grid04" class="grids">
<div class="gridText">digital signage</div>
</div>
<div id="grid05" class="grids">
<div class="gridText">3d</div>
</div>
<div id="grid06" class="grids">
<div class="gridText">virtual sets</div>
</div>
<div id="grid07" class="grids">
<div class="gridText">print</div>
</div>
<div id="grid08" class="grids">
<div class="gridText">technical direction</div>
</div>
<div id="grid09" class="grids">
<div class="gridText">live events</div>
</div>
<div id="grid10" class="grids">
<div class="gridText">photography</div>
</div>
<div id="grid11" class="grids">
<div class="gridText">workflow automation</div>
</div>
<div id="grid12" class="grids">
<div class="gridText">our clients</div>
</div>
</div>
Hope that helps!
I am trying to get a box to grow, fade, change blue , and reset according to button pressed. So far color change , and reset are working ; fade and grow result in my box dissapearing.
How can I get the box to fade on click, while staying the same color as it currently is, and grow while remaining what color it is currently , when clicked.
Code:
<!DOCTYPE html>
<html>
<head>
<title>Jiggle Into JavaScript</title>
<style>
body {margin:25px}
#resetDiv {height:150px;width:150px; background-color:orange;}
#blueDiv {height:150px;width:150px; background-color:blue;}
#fadeDiv {width:150px;height:150px;background-color:orange;opacity:0.75;}
#growDiv {height:150%;width:150%;background-color:orange}
</style>
</head>
<body>
<button onclick="grow()">
Grow
</button>
<button onclick="blue()">
Blue
</button>
<button onclick="fade()">
Fade
</button>
<button onclick="reset()">
Reset
</button>
<div id="blueDiv">
</div>
<script>
var div = document.getElementById("blueDiv");
function blue() {
div.setAttribute("id", "blueDiv");}
function reset() {
div.setAttribute("id", "resetDiv");}
function fade() {
div.setAttribute("id", "fadeDiv");}
function grow() {
div.setAttribute("id", "growDiv")
}
</script>
</body>
</html>
For fade-in, you can add fade-in class to the element (when clicking the button).
This is the relevant css:
.fade-in {
opacity: 1;
animation-name: fadeInOpacity;
animation-iteration-count: 1;
animation-timing-function: ease-in;
animation-duration: 2s;
}
#keyframes fadeInOpacity {
0% {
opacity: 0;
}
100% {
opacity: 1;
}
}
For grow, you can add grow class:
.grow {
transform: scale(1.5);
}
So you can declare it:
const myDiv = document.getElementById('myDiv'); // get the element
function grow() { // add grow to class list
myDiv.classList.add("grow");
}
// add fade-in and remove it after 2 seconds
// 2 sseconds are the seconds of fade-it to get completed.
function fade() {
myDiv.classList.add("fade-in");
setTimeout(function(){myDiv.classList.remove("fade-in");}, 2000);
}
function blue() {
myDiv.classList.add("blue");
}
function reset() { // reset the class list
myDiv.classList = [];
}
This is a working jsfiddle
Apologies if this seems simple however I cannot seem to get this to work.
I would like to have a div and within that div have text fade in, slide up and fade out all in one motion. So far I can get the text to fade in and slide up in one motion, however, the text pauses before doing the slide fade out animation.
$(document).ready(function () {
$("button").click(function(){
$('#theDIV').css({'display':'block','opacity':'0'}).animate({'opacity':'1','top':'-=50px'}, 1500);
$('#theDIV').css({'display':'block','opacity':'1'}).animate({'opacity':'0','top':'-=50px'}, 1500);
});
});
#theDIV{display:none; position:relative;}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<button>Start Animation</button>
<br>
<br>
<div id="theDIV">Some text</div>
$(document).ready(function () {
$("button").click(function(){
$('#theDIV').css({'display':'none','top':'50px'});
$('#theDIV').css({'display':'block','opacity':'0'}).animate({'opacity':'1','top':'-=50px'}, 1500);
setTimeout(function(){ $('#theDIV').css({'opacity':'1'}).animate({'opacity':'0','top':'-=50px'}, 1500); }, 1500);
});
});
#theDIV{display:none; position:relative;margin:30px 150px;}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button>Start Animation</button>
<br>
<br>
<div id="theDIV">Some text</div>
use transform instead top style:
$('#theDIV').css({'display':'block', 'opacity':'0'}).animate({'opacity':'1','transform':'translateY(-50px)'}, 1500);
$('#theDIV').css({'display':'block', 'opacity':'1'}).animate({'opacity':'0','transform':'translateY(-50px)'}, 1500);
All the answers you receive seems working well excepted that they use Javascript to run the animation (and the top attributes) which both are bad practices for micro-interaction like yours.
I link you a very good articles of Googles about animations using Javascript vs CSS.
And a second one Why Moving Elements With Translate() Is Better Than Pos:abs Top/left by Paul Irish.
Here an example using only a toggle class & Keyframes to run your animation.
$(document).ready(function () {
$("button").click(function(){
$('.show-up-and-fade').toggleClass('animate');
});
});
.show-up-and-fade {
opacity: 0;
transform: translateY(30px);
}
.show-up-and-fade.animate {
animation: show-up-and-fade 2s forwards;
}
#keyframes show-up-and-fade {
50% {
opacity: 1;
}
100% {
opacity: 0;
transform: translateY(-30px);
}
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button>Start Animation</button>
<div class="show-up-and-fade">animated text</div>
Hope it will help you !
I have a div with some content in it, and I am showing a button with jQuery. I want to fade it in thus I used:
setTimeout(function() {
jQuery('#button').css('opacity', 1);
}, 100);
First, on html, I have set the button's html to display:none; opacity: 0 I have achieved showing/hiding button, however when it shows, it's making the div stretch instantly. Instead, I want the parent div to expand with transition.
I have created a Fiddle: https://jsfiddle.net/atg5m6ym/7450/ . In this example, when I press the trigger button, I want the button to fade in as well as applying transition on the parent div.
For optimal performance, when using transitions and animations in CSS, you should stick to opacity and transform instead of display: none; and width/height.
Will quote the comment I stated above:
The way you designed this is not ideal, you should not be using
display: none; in transitions or animations. This will cause redrawing
in your browser, and you cannot transition properties with binary
settings, display just switches between states (ex: none/block), not
between values like opacity does.
What you could do is separate your content, sharing the same background color to simulate it is the same container.
Then use transform and the scale() function.
Code Snippet:
jQuery('#trigger').click(function() {
jQuery('.bottom-content').addClass('open');
})
.top-content,
.bottom-content {
background-color: lightblue;
}
.bottom-content {
transform: scaleY(0);
transition: transform 250ms ease-in;
transform-origin: top;
}
.bottom-content.open {
transform: scaleY(1);
}
.bottom-content.open #otherButton {
opacity: 1;
}
#otherButton {
margin-top: 20px;
opacity: 0;
transition: opacity 10s;
transition-delay: 250ms;
/* Separated for clarity purposes, wait for parent transition to end before starting this one*/
}
<script src="https://www.addressfinder.co.nz/assets/v2/widget.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="container">
<div id="content">
<section class="top-content">
<button id="trigger">
Trigger
</button>
<br />Lalala La
<br />Lalala La
<br />Lalala La
<br />
</section>
<section class="bottom-content">
<button id="otherButton">
Test Btn
</button>
</section>
</div>
</div>
The accepted answer is overkill. Just use .fadeIn() and forget the opacity and transition settings completely. If you want to have the div expand separate from the button, just apply the effect to the div and then trigger the button effect at the end of the div effect. This snippet does the same thing as the accepted answer without any of the CSS troubles:
$(function(){
jQuery('#otherButton').hide();
jQuery('#two').hide();
});
$('#trigger').click(function() {
$('#two').slideDown(2000, function(){
$('#otherButton').fadeIn();
});
})
#container, #two {
background-color: lightblue;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script>
<div id="container">
<div id="content">
<button id="trigger">Trigger</button>
<br>
Lalala La<br>
Lalala La<br>
Lalala La<br>
<div id="two">
<button id="otherButton">Test Btn</button>
</div>
</div>
</div>
You can combine the jquery:
jQuery('#trigger').click(function() {
jQuery('#otherButton').slideDown(300).css('opacity', 1);
})
Note that I used the slideDown() function rather than show(). Using a transition function allows you to set an execution time. show() simply toggles the css display property, but you can not transition the display property.
Updated Fiddle
Instead of adding CSS with jQuery, you can simply add a class instead.
Set this class to whatever properties you want on it, us as:
.is-visible {
opacity: 1;
}
Example Fiddle: https://jsfiddle.net/atg5m6ym/7456/
Now, CSS doesn't like to transition when switching display: none; so instead I have simply set the height: 0; and only applied necessary styling on the .is-visible class.
This jsfiddle example can explain more or less what I mean
Click here
This is my actual code
JS
loadMore : function(){
var limit = initial_rows+1; //initial_rows begin being 2
var number_of_rows_to_append = initial_rows+2; // 4
$card.css('height', $card.find('.title-box').height() + number_of_rows_to_append * 70); //update card height
for(var i = initial_rows; i<=limit; i++){
$(template(content[i])).appendTo($contentJQuery);
}
$contentJQuery.find('.normal-box').slice(-2).addClass('show');
initial_rows+=2;
}
},
CSS
.normal-box{ /*Container of other tiny boxes*/
height: 70px;
border-bottom: 1px solid;
border-bottom-color: gainsboro;
overflow: hidden;
opacity: 0;
transition: opacity 0.5s ease 0.5s;
}
.normal-box.show{
opacity: 1;
}
HTML
<div class="card">
<div class="content">
<div class="normal-box">
</div>
<div class="normal-box">
</div>
<div class="normal-box">
</div>
<div class="normal-box">
</div>
</div>
</div>
Basically there is a function which creates the card and appends only 2 normal-boxes at the beginning(there opacity is set to 1 automatically). When loadMore() function is triggered 2 more rows have to be appended with the opacity transition as shown in the jsfiddle example(in my case the rows appear, in the jsfiddle they disappear). The transition consists in the card getting bigger(thats why card height gets updated) with a blank space, then the 2 last normal-boxes appear with transition
The problem is that in my case the last row appears without transition and the penultimate appears with transition, no idea why. Any help will be appreciated
Updated Fiddle:
Perhaps this is what you intended:
revised jsFiddle
$('.btn').on('click', function(){
$('li').each(function(){
var txt = $(this).text().slice(0,-2); //or .slice(-1) ?
$(this).text(txt).addClass('change');
});
});