How to add a fade effect when changing classes? [duplicate] - javascript

This question already has answers here:
animating addClass/removeClass with jQuery
(6 answers)
Closed 6 years ago.
I don't know how to add an animation effect when the classes are changed.
Here is my code:
$("#a-button").click(function() {
$("#a-div").toggleClass("hidden show");
});
This works but it doesn't have any effect when changing the classes.I want to make it smoother, maybe something like fading in and out. How can i do that?

You could use fadeOut()/fadeIn() with hasClass() condition to check the if the div has a specific class:
$('.show_hide').click(function()
{
if($('#target').hasClass('show'))
$('#target').fadeOut('normal');
else
$('#target').fadeIn('normal');
$('#target').toggleClass("hidden show");
});
#target {
background: green;
margin-bottom:15px;
height:150px;
padding:5px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button class="show_hide">Show / Hide</button>
<div id="target" class='show'></div>

Try this and let me know. It is fadeToggle by jQuery.
$("#a-button").click(
function() {
$("#a-div").fadeToggle();
});

Related

Jquery Header add class on hover [duplicate]

This question already has answers here:
Jquery addClass and Remove Class on hover
(4 answers)
Closed 5 years ago.
I´m trying to add a hover function which adds a class to my header. I already got this code which does the same but on scroll.
$(document).ready(function(){
jQuery(window).trigger('resize').trigger('scroll');
$(window).scroll(function() {
var scroll = $(window).scrollTop();
if (scroll >= 1 ) {
header.removeClass('scroll').addClass("cover");
$('#phantom').show();
$('#phantom').css('height', Heightcalculate+'px');
} else {
header.removeClass("cover").addClass('scroll');
$('#phantom').hide();
}
});
Is there a way to edit this existing code so it does the same but on hover? i tried everything i could think of and it wouldn´t work.
Thanks in advance.
Without seeing all of your code, it's hard to tell you exactly what to do, but this is the general idea using jQuery's $.hover(). Apply the class on hover, and optionally remove the class when you hover off.
$('header').hover(function() {
$(this).addClass('class');
}, function() {
$(this).removeClass('class');
});
.class {
background: black;
color: white;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<header>header</header>

Using Javascript I want a button to show or hide a div by changing the css [duplicate]

This question already has answers here:
toggle show/hide div with button?
(8 answers)
Closed 6 years ago.
Using JavaScript, I want a button to show or hide a div by changing the CSS.
HTML:
<div id="bottomContainer">
<div id="count" class="count">...</div>
<div id="visualizations>...</div>
</div>
CSS:
.bottomContainer {
display: block;
}
I want to use javascript to do the following
[button]
When button is clicked Javascript changes the CSS for bottomContainer to the following
.bottomContainer {
display: none;
}
Is this possible?
Yes, a number of ways. With vanilla JS, you would do something like:
document.getElementById('myButtonId').addEventListener('click', function () {
document.getElementById('bottomContainer').style.display = "none";
}
This is just one of a few ways. You could also make a css rule for a .hide class that has the display: none rule, or do this with jQuery's .hide() method, or any number of framework-based means.
This will work if you only want the button to hide the container and not toggle its visibility.
<button onClick="document.getElementById('bottomContainer').style.display = 'none';">Click me</button>

How to change style of a class inside Javascript? [duplicate]

This question already has answers here:
jquery to change style attribute of a div class
(9 answers)
Closed 7 years ago.
I want to change background color of my div using jQuery selector and I can't get it to work.
My Codepen.
HTML
<div class='demo'></div>
CSS
.demo {
height: 100px;
width: 100px;
}
JS
$(document).ready(function() {
$('demo').style.backgroundColor = "black";
});
$('demo') will return jquery object not a dom object also your selector is missing a ., use
$('.demo').css('background-color ','black');
Reference: jquery css() doc.

How to apply hover effect to 2 different elements [duplicate]

This question already has answers here:
How to affect other elements when one element is hovered
(9 answers)
Closed 7 years ago.
I'm trying to apply the hover effect to two distinct elements at the same time, which means that when I mouseover one element I was the other element to be with hover effect as well. The two elements are one simple text and one icon (using font awesome). Is there any way to do this with html and css only? Or do I need to use javascript?
Thank you very much!
I think this is what you mean. And if it is, then it is by far the easiest way.
HTML:
<body>
<button class="button">Click Me!</button>
<p class="text">Hello World</p>
</body>
CSS:
.button:hover{ //To change button color
background-color: #436242;
}
.button:hover + .text{ //To change text color
background-color: #436242;
}
So pretty much just add the "+" then the second div.
You could do it with css as alireza told you but you need an strict html code. The easiest way by far is jqueryand quite easy to implement and understand.
With this code:
$('.element').on('hover', function(){
$('.element').toggleClass('hover');
});
You just add the class hover to whatever element with the class element you hover. Then just add css properties to class hover:
.hover {
color:red;
}
JSFIDDLE
Edited: after reading your comment... if you want a different hover effect for each element then as easy as with this html:
<p class="element text">Text</p>
<p class="element icon"></p>
you just toggleClass diferent class for element like:
$('.element').on('hover', function(){
$('.text').toggleClass('hover1');
$('.icon').toggleClass('hover2');
});
NEW JSFIDDLE
To add it to your project don't forget the script tag and on load function (jsfiddle does it automatically):
<script type="text/javascript">
$(document).ready(function () {
$('.element').on('hover', function(){
$('.element').toggleClass('hover');
});
});
</script>

Whats wrong with the .animate() [duplicate]

This question already has answers here:
Animate element transform rotate
(7 answers)
Closed 8 years ago.
What is wrong with this Code?
$("button").click(function(){
var div=$("#oarm2");
div.animate({marginTop:'150px', transform:'skew(15deg, -60deg)'},"slow");
});
When I press the button, an div Element should be go down in the Page and change the Form.
The "marginTop" is functionally, but the transform skew not..
What is wrong? How I must write this?
Check this Demo Fiddle
Js
$("#go").click(function(){
$("#oarm2").animate({marginTop:'150px', transform:'skew(15deg, -60deg)'},"slow"); });
HTML
<button id="go">» Run</button>
<div id="oarm2">Hello!</div>
CSS
div {
background-color: #bca;
width: 100px;
border: 1px solid green;
}
Here I include jquery library file jquery-1.8.3.js

Categories