I made a button that when I pressed it, it will add a class with animation into the image. I made another button and I want to add another class to the image which will revert the image back to its original size. But the second class is not adding into it, I've tried to remove the previous class but it's unremovable after adding into image.
Any way to add the second class into the image?
$(document).ready(function() {
$('#profile').click(function() {
$('.imageone').addClass('move');
$('.imageone').removeClass('imageone');
})
$('#back').click(function() {
$('.imageone').removeClass('move');
$('.imageone').addClass('goback');
})
})
.move {
animation: scale 1s ease-in-out forwards;
z-index: -1;
}
#keyframes scale {
from {
position: relative;
z-index: -1;
bottom: 0pt;
}
to {
position: relative;
bottom: -142pt;
transform: scale(1.16, 1.23);
left: 0pt;
z-index: -1;
transform-origin: bottom right;
}
}
.goback {
animation: goback 1s ease-in-out forwards;
z-index: -1;
}
#keyframes goback {
from {
position: relative;
bottom: -142pt;
transform: scale(1.16, 1.23);
left: 0pt;
z-index: -1;
transform-origin: bottom right;
}
to {
position: relative;
z-index: -1;
bottom: 0pt;
}
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="pageone">
<img src="images.png" class="imageone" alt="liam">
</div>
<div id="textprofile">
<a href="#" class="button" id="border">
<p id="profile">Visit Profile</p>
</a>
</div>
<p id="back">go back</p>
You have two elements with same id so when you add an event listener using ID selector, javascript cannot handle such a thing because you are supposed to have each ID only once in HTML pages. Try to change your selector and also change IDs.
First you need to remove the existing class and add a new class to it. You have added a class first with the existing one so it will get appended and after you are trying to remove that class "imageone" which will not get removed. So try removing imageone first and add the move class. Provide an Id to an img element and do something like this.
$(document).ready(function() {
$('#profile').click(function() {
$('#imageone').removeClass('imageone');
$('#imageone').addClass('move');
})
$('#back').click(function() {
$('#imageone').removeClass('move');
$('#imageone').addClass('goback');
})
})
plz try this code..
$(document).ready(function() {
$('#profile').click(function() {
$('.imageone').addClass('move');
$('.imageone').removeClass('goback');
});
$('#back').click(function() {
$('.imageone').removeClass('move');
$('.imageone').addClass('goback');
});
});
Related
i have sidebar if i click on button and then side bar appears from left, and when i click on body side bar hides, but why it is happening only for once.
FIDDLE
HTML
<body>
<div class="site-overlay"></div>
button ☰
<nav id="menu" class="panel" role="navigation">
<ul>
<li>Home</li>
<li>The Ballad of El Goodo</li>
<li>Thirteen</li>
<li>September Gurls</li>
<li>What's Going Ahn</li>
</ul>
</nav>
</body>
JS:
$(document).ready(function() {
$('.menu-link').bigSlide({
easyClose: true
});
$('.menu-link').click(function() {
$('body').addClass('menu-open');
});
});
CSS:
a.menu-link {
float: right;
padding: 20px
}
nav#menu {
background: lightblue;
z-index: 100000000000000
}
.site-overlay {
display: none;
}
.menu-open .site-overlay {
display: block;
position: fixed;
top: 0;
right: 0;
bottom: 0;
left: 0;
z-index: 9998;
-webkit-animation: fade 500ms;
animation: fade 500ms;
}
HOW CAN I MAKE IT WORK IT MANY TIMES, instead of only one time.
After the click, you're showing your overlay, but because it has z-index: 9998, the overlay is being placed on top of the button, so when you try to click the button, you're actually clicking on the overlay, not on the button.
You should make an event when the overlay is clicked to remove that class, like this:
$('.site-overlay').click(function() { $('body').removeClass('menu-open') })
This is because the added class is not removed.
You can control it by adding a toggle value for that button.
Instead of addClass put toggle.
On the way you put you will add "menu-open" once and it will never be removed.
you have more information about this here: https://www.w3schools.com/howto/howto_js_toggle_class.asp
You can do it by this JS code.
$(document).ready(function() {
$('.menu-link').bigSlide({
easyClose: true
});
$('.menu-link').click(function() {
event.stopPropagation();
$('body').addClass('menu-open');
});
$('body').click(function(){
$('body').removeClass('menu-open');
})
});
I know how to make the navigation bar fading into the viewport from the top.
$(document).scroll(function () {
var x = $(window).scrollTop();
console.log(x)
if (x > 699) {
$("header").addClass("fix");
} else {
$("header").removeClass("fix");
}
});
.fix {
position: fixed;
background:#fff;
-webkit-animation: test .5s linear;
}
.fix + main {
padding-top: 100px;
}
#-webkit-keyframes test {
from { top:-100px }
to { top:0 }
}
When it removes the class, it just disappears.
How can i make fade out back to the top?
I log it into console only for testing. (Yes, i wrote the code, it's not copy paste.)
There is no need to use keyframes here, a simple transition will do the trick
You need to put the position fixed and the original top value on the header itself and only update the animated value when scrolling.
The issue you had before was you had position fixed on the fix class, as soon as you remove the fix class, your element is no longer fixed so it will disappear without any animations. In other words, it can only animate if you had the fix class on it.
https://jsfiddle.net/19qdtL3L/
I edited the scroll value so it will show up sooner
$(document).scroll(function() {
var x = $(window).scrollTop();
console.log(x)
if (x > 300) {
$("header").addClass("fix");
} else {
$("header").removeClass("fix");
}
});
header {
top: -100px;
position: fixed;
transition: top 0.5s;
}
.fix {
background: green;
top: 0;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<header>header element</header>
<br><br><br><br><br>
<br><br><br><br><br>
<br><br><br><br><br>
<br><br><br><br><br> <br><br><br><br><br> <br><br><br><br><br>
<br>sdfdsf
Your actual keyframe is only going one way : down (top: -100px to top: 0). What you want to do can't work like this.
You could do this without a keyframe, only with a transition :
$('button').on('click',function(){
$('div').toggleClass('shown');
});
div{
position: static;
top: -50px;
left: 0;
width: 100%;
height: 50px;
background-color: red;
transition: all .5s;
}
div.shown{
top: 0;
}
button{
margin-top:100px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div></div>
<button>Click me</button>
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>
I want to use an Angular function to activate a Css animation. I have searched for ways to do this but Im really confused on how to do it in my case. I wish to have the div "slide1" to slide horizontally to the right when one of the buttons "B1" OR "B2" is clicked.
This is my Angular function:
directive('click2', () => {
return{
restrict: 'A',
link: (scope) => {
scope.clicked = () => {
}
}
}
})
My slide div css is:
.slide1 {
bottom: -500px;
width: 30%;
//min-width: 275px;
height: 50%;
min-height: 390px;
box-sizing: border-box;
position: relative;
content: '';
background: #a2e0f7;
animation:nudge 5s linear alternate;
}
#keyframes nudge {
0%{
right: 500px;
};
100% {
transform: translate(500px);
}
50% {
transform: translate(0,0);
}
}
Any help with how I can get the Slide1 div to move on click with my Angular function?
An easy way to do this is to add the class to the div dynamically.
And one way to do that would be something like:
<div ng-controller="MyCtrl">
<button ng-click="doSlide = !doSlide">A</button>
<button ng-click="doSlide = !doSlide">B</button>
<div ng-class="{'slide1': doSlide}">Click a button to move me</div>
</div>
Clicking either button will toggle the doSlide value. When doSlide is true the slide1 class is added to the div.
Note: it is not necessary to define doSlide in the controller, Angular will automatically add it to the scope.
I am trying to have text appear over each image as the user hovers over that specific image. I don't want all of the text for every image to appear when a user hovers over one image. I have it where only the one photo becomes opaque but right now the text shows up for every image when hovering over any image.
HTML:
<div class="image">
<img class="projectImage" src="images/peralta.png" alt="">
<h3 class="hiddenH3">This is a test!</h3>
</div>
SCSS:
.image {
position: relative;
width: 100%;
.projectImage {
width: 100%;
transition: all 0.5s ease-in;
}
.hiddenH3 {
display: none;
position: absolute;
top: 45%;
width: 100%;
}
}
JS:
$('.projectImage').on("mouseover", function() {
$(this).closest('.projectImage').addClass("coolEffect");
$('.hiddenH3').fadeIn(1000);
});
$('.projectImage').on("mouseout", function() {
$(this).closest('.projectImage').removeClass("coolEffect");
$('.hiddenH3').fadeOut(1000);
});
Use .next along with this
$('.projectImage').on("mouseover", function() {
$(this).addClass("coolEffect");
$(this).next(".hiddenH3").fadeIn(1000);
});
$('.projectImage').on("mouseout", function() {
$(this).removeClass("coolEffect");
$(this).next(".hiddenH3").fadeOut(1000);
});
You can also remove .closest(".projectImage") as this refers to that image.
Why don't you do this with CSS? Since the selectors needed are very old and entrenched, you can do something like this:
.projectImage + h3 {
transition: opacity 1000ms;
opacity: 0;
}
.projectImage:hover + h3 {
opacity: 1;
}
This will fade in your h3 when you hover over the project image, as long as you structure it in that way (i.e., ing, then h3). You can also remove the classes cooLEffect and hiddenh3 as we have defined that by only targeting the h3 that comes after a project image.
The fancy transition effect will only work on modern browser, but older browsers gracefully degrade.
Edit: SASS / LESS
.image {
.projectImage {
& + h3 {
transition: opacity 1000ms;
opacity: 0;
}
&:hover + h3 {
opacity: 1;
}
}
}