I have an element that works just fine with the following code. It's an object #obj1 that is hidden when loading the page, but appears when clicking on #obj2.
#obj1{
position:fixed;
width:100px;
bottom:180px;
right:100px;
display:none;
}
$("#obj1").hide();
$("#obj2").show();$('#obj2').toggle(function(){
$("#obj1").slideDown(function(){});
},function(){
$("#obj1").slideUp(function(){});
});
but I would like to have it like this:
$("#obj1").css({"opacity": "0","bottom": "180"})
$("#obj2").toggle(
function () {
$("#obj1").animate({"opacity": "1","bottom": "140"}, "slow");
},function () {
$("#obj1").animate({"opacity": "0","bottom": "180"}, "slow");
});
I would like it to fade in, but how do I add the animation to the first script? (animation ex: .animate({"opacity": "1","bottom": "140"}, "slow");)
Here is a super simple demo of fading in an element using CSS. You can use jQuery to add the class through a click event.
// HTML
<div id="myId" class="hide">
This is div with myId
</div>
// CSS
.hide {
display: none;
}
.myId {
animation: fadein 2s;
}
#keyframes fadein {
from { opacity: 0; }
to { opacity: 1; }
}
// JQUERY
$("#myId").removeClass("hide").addClass("myId");
You can see a working demo here. You'll just have to modify it to trigger on click of obj2 or where you like
EDIT - As per your comment above I have edited the pen, so now the element will be hidden on page load and then the class will be removed and the animation class added.
You would be best keeping the styles within css, and just using js to change the state (add/remove a class). The way you have the javascript is passable, but it'd be better for the class to be toggled based on itself so they can't accidentally get out of sync:
$('#obj2').on('click',function(e){
e.preventDefault();
if($('#obj1').hasClass('js-on'))
$('#obj1').removeClass('js-on');
else
$('#obj1').addClass('js-on');
});
#obj1{
position:absolute;
width:100px;
bottom:10px;
right:20px;
opacity: 0;
background-color: yellow;
padding: 1em;
transition: .5s opacity, .5s bottom;
}
#obj1.js-on {
opacity: 1;
bottom: 40px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<a id="obj2" href="#">Click me</a>
<div id="obj1">Hi</div>
$(document).ready(function() {
$("#obj1").hide();
$("#obj2").show();
});
$('#obj2').toggle(function(){
$("#obj1").slideToggle();
});
This will show obj1 by sliding when obj2 is pressed. To have it fade in instead Try,
$("#obj2").click(function () {
$("#obj1").fadeToggle("slow","swing");
This toggles obj1 fading in and out.
reference:
http://api.jquery.com/fadetoggle/
Slightly confused by the question, but here's my attempt at an answer: hope it helps
$(".obj1").click(function(){
$(".obj2").css('opacity', 0)
.slideDown('slow')
.animate(
{ opacity: 1 },
{ queue: false, duration: 'slow' }
);
});
.obj1 {
display: inline-block;
padding: 10px;
background: lightgrey;
}
.obj2 {
height: 100px;
width: 100px;
background: red;
display:none;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<div class="obj1">click me</div>
<div class="obj2"></div>
Related
I have an alert box that I want to use sessionStorage so that it only appears once. When the user clicks to close the alert, I want the box to disappear (display:none) but fade-out.
I read that you have to use two different functions - one that is activated when clicked and starts the transition and another the adds the 'display' style once transitioned. However, I can't get that to work:
<style>
.ddAlert {
padding: 20px;
box-sizing: border-box;
background-color: #f0ad4e;
color: #fff;
opacity: 1;
transition: opacity 1s;
}
.hide {
opacity: 0;
display: none;
}
</style>
<script type="text/javascript">
document.addEventListener("DOMContentLoaded", function() {
let dismissed = sessionStorage.getItem("dismissed");
let alertDiv = document.getElementById("alert");
let dismissButton = document.getElementById("dismiss");
if (!dismissed) {
alertDiv.classList.remove("hide");
}
alertDiv.addEventListener("click", function() {
this.style.display = "block";
}.bind(alertDiv));
alertDiv.addEventListener("transitionend", function() {
if (this.className == "hide") {
this.style.display = "none";
}
sessionStorage.setItem("dismissed", true);
}.bind(alertDiv));
});
</script>
<div class="ddAlert hide" id="alert">
SOME ANNOYING ALERT HERE!
<button type="button" id="dismiss">X</button>
</div>
You are on the right track. Instead of listening on click on the alert, use the button as I assume it is there for that reason. When clicking the button the .hide class should be added to the alert. This will start the transition from opacity: 1; to opacity: 0;.
I suggest that instead of using inline-styles, that you stick to classes. Inline styles are hard to overwrite and prevents you from utilizing the full power of CSS. So I've added some classes in there to help you out.
Try out the example below.
<div class="ddAlert hidden" id="alert">
SOME ANNOYING ALERT HERE!
<button type="button" id="dismiss">X</button>
</div>
.ddAlert {
display: block;
transition: opacity 1s;
}
.hide {
opacity: 0;
}
.hidden {
display: none;
}
document.addEventListener("DOMContentLoaded", function() {
let dismissed = sessionStorage.getItem("dismissed");
let alertDiv = document.getElementById("alert");
let dismissButton = document.getElementById("dismiss");
if (!dismissed) {
alertDiv.classList.remove("hidden");
}
dismissButton.addEventListener("click", function() {
alertDiv.classList.add("hide");
});
alertDiv.addEventListener("transitionend", function({ target }) {
if (target.classList.contains("hide")) {
target.classList.add("hidden");
}
sessionStorage.setItem("dismissed", true);
});
});
This answer greatly lends from this SO question titled CSS3 Transition - Fade out effect which notes
When showing the element (by switching to the visible class), we want
the visibility:visible to kick in instantly, so it’s ok to transition
only the opacity property. And when hiding the element (by switching
to the hidden class), we want to delay the visibility:hidden
declaration, so that we can see the fade-out transition first. We’re
doing this by declaring a transition on the visibility property, with
a 0s duration and a delay.
I chose not to mark this question as a duplicate because it also involves the transitionend event. Additionally, I've focused only on the essence of the transition, with a minimal illustration.
The crucial element is the .dismissed-saved class.
let alertDiv = document.getElementById("alert");
let dismissButton = document.getElementById("dismiss");
dismissButton.addEventListener("click", function() {
// kick in the transition
alertDiv.classList.add("dismissed-saved");
// *this is where state should be committed
});
alertDiv.addEventListener("transitionend", function({
target
}) {
if (target === alertDiv) {
// clean up and show a nifty text message illustrating the event handler.
target.classList.add("hidden");
target.classList.remove("dismissed-saved");
document.getElementById("dismissed").classList.remove('hidden');
}
});
.ddAlert {
padding: 20px;
box-sizing: border-box;
background-color: #f0ad4e;
color: #fff;
opacity: 1;
}
.hidden {
display: none;
}
.dismissed-saved {
visibility: hidden;
opacity: 0;
transition: visibility 0s 2s, opacity 2s linear;
}
<div class="ddAlert" id="alert">
SOME ANNOYING ALERT HERE!
<button type="button" id="dismiss">X</button>
</div>
<div id="dismissed" class="hidden">
Dismissed!
</div>
Good luck!
Reference: Comments posted by #AnkithAmtange
Given html
<div>Click Away</div>
css
div {
width: 200px;
height: 200px;
background: orange;
}
div:active {
color: white;
background: rebeccapurple;
}
jsfiddle https://jsfiddle.net/u3uhq9m1/
How to pass the currently :active pseudo class DOM element to javascript?
First attempt. Note, jQuery is not a requirement.
$(document).ready(function() {
var active;
$("div").click(function() {
active = $(":active");
setTimeout(function() {
console.log("active", active)
}, 1000)
})
})
https://jsfiddle.net/u3uhq9m1/1/
You can use the document.activeElement for that.
$(function() {
$(document).on('click', function() {
console.log(document.activeElement);
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="a">asdf</div>
<span>123</span>
<select>
<option>1</option>
</select>
<button>123</button>
<input />
Update
If you want to pass the current :active element - you must use the mousedown (and not the click event), because the :active element is not active anymore once your mouse is up.
Since the :active bubbles up the DOM tree, all the parent elements will also get the :active pseudo-class (added a red border in the following example) so I took only the last element in the $(':active') selector.
Check this example:
$(document).ready(function() {
var active;
$(document).mousedown(function() {
active = $(":active");
setTimeout(function() {
console.log("active", active.last()[0])
}, 1000)
})
})
div {
width: 100px;
height: 100px;
background: orange
}
div:active {
color: white;
background: rebeccapurple
}
:active {
border: 1px solid red;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div>Click Away</div>
You can utilize :active:hover pseudo class, animation with duration set to 0s, #keyframes at css; animationend event at javascript
:root {
--activeprop: 0px;
}
div {
position: relative;
left: var(--activeprop);
width: 200px;
height: 200px;
background: orange;
}
div:active:hover {
color: white;
background: rebeccapurple;
animation: active 0s;
-moz-animation: active 0s;
-webkit-animation: active 0s;
}
#keyframes active {
from {
left:var(--activeprop);
}
to {
left:var(--activeprop);
}
}
#-moz-keyframes active {
from {
left:var(--activeprop);
}
to {
left:var(--activeprop);
}
}
#-webkit-keyframes active {
from {
left:var(--activeprop);
}
to {
left:var(--activeprop);
}
}
<div>Click Away</div>
<script>
for (el of document.querySelectorAll("div")) {
el.addEventListener("animationend", function(event) {
console.log(`${event.target.nodeName} is :active`)
})
};
</script>
This is my piece of HTML code
<div class='qna_div'>
<div class="q_div"></div>
<div class="a_div"></div>
</div>
I make a Ajax request and get a json response for every click by the user and i append the q_div and a_div using the jquery function
$('.q_div').append(data.question);
$('.a_div').append(data.answer);
I have css keyframe animation on both q_div and a_div to come from right to left of the screen. But the animation works only on the first load of the page and not on the 'append' function for the json response. I am new to css and animations. help me out for the responsive animations
animation in css3 code:
.q_div {
animation: q_ani 2s;
}
#keyframes q_ani {
from{margin-left: 50px;}
to{margin-left: default;}
}
a possible solution using css animation
$(function() {
var cssAnimationEnd = "webkitAnimationEnd mozAnimationEnd MSAnimationEnd oanimationend animationend";
$('.click').click(function() {
$('.q_div, .a_div').addClass("animate").one(cssAnimationEnd , function() {
$('.q_div, .a_div').removeClass("animate");
});
});
})
.q_div.animate {
animation: q_ani 2s;
}
.a_div.animate {
animation: q_ani 2s;
}
#keyframes q_ani {
from {
margin-left: 150%;
}
to {
margin-left: default;
}
}
/*for test purpose*/
.q_div,
.a_div {
position: relative;
height: 20px;
width: 500px;
background: #ddd;
margin-top: 10px;
}
.qna_div {
padding: 20px;
width: 500px;
background: #333;
}
body {
overflow: hidden;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button class="click">go</button>
<div class='qna_div'>
<div class="q_div"></div>
<div class="a_div"></div>
</div>
You should delete and add .q_div class each time you need animation appear
You could use jquery to animate your divs. Put this code in the success ajax callback:
// First put your divs to the right
$('.q_div, .a_div').css('right','0');
// Do the animation
$('.q_div, .a_div').animate({
left: 0,
}, 1000);
https://jsfiddle.net/a8cq9yj1/1/
I hope it can help you,i just simple using the classList function and some SASS style rule
http://jsbin.com/vosuvam/2/edit?js,output
I have a logo that I want to fade-in when I hover on the image, and then fade out and be replace by the original when I hover out of the image. I almost got it working but the image double fades-in with this approach and the image does not fade-out. Any changes that can be done here. Here is my html, js and css. Run live example:
$(".opening").hover(function() {
$(".opening img").animate({
opacity: 1
}, "slow");
$(".opening img").css({
"width": 250
});
$(".opening img").attr("src", "http://www.letsgodigital.org/images/producten/3376/pictures/canon-eos-sample-photo.jpg");
}, function() {
$(".opening img").animate({
opacity: 0
}, "slow");
$(".opening img").css({
"width": 150
});
$(".opening img").attr("src", "http://www.cameraegg.org/wp-content/uploads/2015/06/canon-powershot-g3-x-sample-images-3-620x413.jpg");
$(".opening img").animate({
opacity: 1
}, "slow");
});
.opening {
padding: 0 4.2%;
display: inline;
}
.opening img {
width: 150px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<div class="opening">
<img src="http://www.cameraegg.org/wp-content/uploads/2015/06/canon-powershot-g3-x-sample-images-3-620x413.jpg" />
</div>
You don't need JS for such simple :hover → fade tasks.
CSS is quite enough
.opening {
position: relative; /* add this */
display: inline-block; /* change */
}
.opening img {
width: 150px;
}
.opening img + img{ /* the second image */
position:absolute;
top:0;
transition: 0.8s; -webkit-transition: 0.8s;
visibility:hidden;
opacity:0;
}
.opening:hover img + img{
visibility:visible;
opacity:1;
width: 250px;
}
<div class="opening">
<img src="http://www.cameraegg.org/wp-content/uploads/2015/06/canon-powershot-g3-x-sample-images-3-620x413.jpg" />
<img src="http://www.letsgodigital.org/images/producten/3376/pictures/canon-eos-sample-photo.jpg" />
</div>
Also, if you change src using JS that means that your animation will always junk the first time since the image needs to be pulled from the server at the time you're trying to actually animate it.
try to use stop() to stop the currently-running animation
Why not this?
$(".opening").mouseenter(function(){
$(".opening img").fadeIn("slow", function () {
$(this).css({"width":250}).attr("src","http://www.letsgodigital.org/images/producten/3376/pictures/canon-eos-sample-photo.jpg");
});
}).mouseleave(function () {
$(".opening img").fadeOut("slow", function () {
$(this).css({"width":150}).attr("src","http://www.cameraegg.org/wp-content/uploads/2015/06/canon-powershot-g3-x-sample-images-3-620x413.jpg").fadeIn("slow");
});
});
Here is the HTML for my menu:
<div class="navLink four">
<div>
this
<div class="subMenu">
link
link
</div>
</div>
</div>
I've got this jQuery to show and hide my menu:
$('.navLink div').hover(
function () {
$('.navLink div .subMenu').css({'display': 'none'});
$(this).find('.subMenu:first').slideDown();
},
function () {
$('.navLink div .subMenu').css({'display': 'block'});
$(this).find('.subMenu:first').slideUp();
}
);
And this CSS:
.navLink .subMenu {
display: none;
position: absolute;
}
.navLink > div:hover .subMenu {
display: block;
}
But the dropdown flikers a lot when you hover over it, I think I need some preventDefault() or something in my javascript.
Here's a JSfiddle to show the problem: http://jsfiddle.net/V5H3A/
Here is the solution: http://jsfiddle.net/jdfqW/1/
You need to stop the animation like so:
$('.navLink div').hover(
function () {
$('.navLink div .subMenu').css({'display': 'none'});
$(this).find('.subMenu:first').stop().slideDown();
},
function () {
$('.navLink div .subMenu').css({'display': 'block'});
$(this).find('.subMenu:first').stop().slideUp();
}
);
For even less lines of code you can do this http://jsfiddle.net/jdfqW/2/:
CSS:
.navLink .subMenu {
display: none;
position: absolute;
}
Javascript:
$('.navLink div').hover(
function () {
$(this).find('.subMenu:first').stop().slideToggle();
}
);
OR if you're SUPER adventurous you can do it all with only CSS3 like so http://jsfiddle.net/jdfqW/3/:
CSS
.navLink .subMenu {
height: 0px;
overflow: hidden;
position: absolute;
-webkit-transition:height 0.5s ease;
-moz-transition:height 0.5s ease;
transition:height 0.5s ease
}
.navLink:hover .subMenu {
height: 20px;
}
$('.navLink div a:first').mouseenter(function () {
$(this).next('.subMenu').slideDown(200);
}).mouseleave(function () {
$(this).next('.subMenu').slideUp(200);
});
Without any flickering ---> http://jsfiddle.net/WK7We/
use stop()... this will stop the running animation which i assume is causing the flickering...
$(this).find('.subMenu:first').stop().slideDown();
$(this).find('.subMenu:first').stop().slideUp();
Working jsFiddle Demo
Use .stop() method before .slideUp() and .slideDown():
$('.navLink div').hover(
function () {
$('.navLink div .subMenu').css({'display': 'none'});
$(this).find('.subMenu:first').stop().slideDown();
// HERE --------------------- ^
},
function () {
$('.navLink div .subMenu').css({'display': 'block'});
$(this).find('.subMenu:first').stop().slideUp();
// HERE --------------------- ^
}
);
References:
.stop() - jQuery API Documentation
Stop the currently-running animation on the matched elements.