Animate addition of a class through jquery/javascript - javascript

I have:
<div class="button" id="button1">Click</div>
<div class="button" id="button2">Click</div>
and the JS
$('.button').click(function(){
$('.button').removeClass('selected');
$(this).addClass('selected');
});
CSS
.selected {
background-color: green;
}
Can I 'animate' the applying of the class 'selected'? I.e on a click of the div, the background slides in from the right or fades in for example? Is there a decent plugin available that could achieve this? Is there are a CSS workaround/method?

Simply use CSS3
-webkit-transition: all 0.5s ease;
-moz-transition: all 0.5s ease;
-o-transition: all 0.5s ease;
transition: all 0.5s ease;
Example
http://jsfiddle.net/tw16/JfK6N/
if you don't want to use CSS3 to support older Browsers use the done() callback of animate
$('.button').click(function() {
$('.button').removeClass('selected');
$(this).animate({
backgroundColor: green
}, 1000, "linear", function() {
$(this).addClass('selected');
});
});

You can use css3 for that. Use transition to background color change.
-webkit-transition: all 0.3s ease;
-moz-transition: all 0.3s ease;
-o-transition: all 0.3s ease;
-ms-transition: all 0.3s ease;
transition: all 0.3s ease;
Here is the example with your code:
http://jsfiddle.net/mm9mV/

Related

What do I change on JQuery Code to Click Text rather than change on Hover?

I am following the site shown below to create tabs on my Divi Site (on my localhost at the moment) but I was looking for some help in regards to changing the behaviour of the code.
https://www.elegantthemes.com/blog/divi-resources/how-to-create-custom-testimonial-tabs-with-divi-free-download
I have managed to follow the tutorial and this works exactly as shown on the site but I would like to change the behaviour from hover to clicking the blurbs (names) but not sure what part of the jquery I need to change.
The following is the jquery code:
jQuery(function($){
$(document).ready(function(){
$('#testimonial-person-1').addClass('testimonial-active');
$('[id*="testimonial-person"]').hover(function() {
var $selector = $(this).attr('id').replace('person', 'copy');
var $testimonial = $('#' + $selector);
$('[id*="testimonial-copy"]').removeClass('show-testimonial');
$testimonial.addClass('show-testimonial');
$('[id*="testimonial-person"]').removeClass('testimonial-active');
$(this).addClass('testimonial-active');
});
});
});
The CSS Code:
.show-testimonial {
visibility: visible !important;
opacity: 1 !important;
top: 0 !important;
}
.testimonial-active {
transform: translateX(-10%);
}
[id*="testimonial-person"]{
-webkit-transition: all 0.5s ease;
-moz-transition: all 0.5s ease;
-o-transition: all 0.5s ease;
-ms-transition: all 0.5s ease;
transition: all 0.5s ease;
cursor: context-menu;
}
[id*="testimonial-copy"] {
-webkit-transition: all 0.3s ease;
-moz-transition: all 0.3s ease;
-o-transition: all 0.3s ease;
-ms-transition: all 0.3s ease;
transition: all 0.3s ease;
position: absolute!important;
top: -100px;
bottom: auto;
left: 0;
right: auto;
visibility: hidden;
opacity: 0;
}
I would appreciate it, if somebody could guide me in how I can make this change on my site.
Thanks in advance.
Thanks to David for pointing it out.
I have changed the following line:
$('[id*="testimonial-person"]').hover(function() {
and this does what I wanted.
Thank you so much.

Changing google chrome auto-suggestion options background

I wanted to change the background of Google Chrome auto-suggestion options!
I have tried the below code sniped and I change everything regarding suggestion, but I can not change the background of the options.
/* Browser autofill options */
input:-webkit-autofill,
input:-webkit-autofill:hover,
input:-webkit-autofill:focus,
input:-webkit-autofill:active,
textarea:-webkit-autofill,
textarea:-webkit-autofill:hover,
textarea:-webkit-autofill:focus,
textarea:-webkit-autofill:active,
select:-webkit-autofill,
select:-webkit-autofill:hover,
select:-webkit-autofill:active,
select:-webkit-autofill:focus {
-webkit-text-fill-color: black;
transition: background-color 50000s ease-in-out 0s, color 5000s ease-in-out 0s;
-webkit-transition: background-color 5000s ease-in-out 0s;
-moz-transition: background-color 5000s ease-in-out 0s;
-ms-transition: background-color 5000s ease-in-out 0s;
-o-transition: background-color 5000s ease-in-out 0s;
}
From the image I think this is bit clear that i want to change the background of the option for example here ["Mithun","Admin"].

Transition on image width does not work with window scroll

i have a logo image in sticky topbar menu so when scrolling down i'm trying to change the image width using css transition but it is not working with jquery window scroll when i add the css class to logo image but when i hover on the logo image it work
my code css
.logo img
{
width: 100%;
transition:width 1s ease;
-moz-transition: width 1s ease;
-ms-transition: width 1s ease;
-webkit-transition: width 1s ease;
-o-transition: width 1s ease;
}
.transition , .logo img:hover{
width: 50%;
transition:width 1s ease;
-moz-transition: width 1s ease;
-ms-transition: width 1s ease;
-webkit-transition: width 1s ease;
-o-transition: width 1s ease;
}
js code
$j = jQuery.noConflict();
$j(function(){
$j(window).on("scroll", function () {
if ($j(this).scrollTop() > 100) {
$j('.logo img').addClass('transition');
console.log($j(this).scrollTop());
} else {
$j('.logo img').removeClass('transition');
console.log('cvc');
}
});
});
please any help and many thanks in advance.
You wants something like this ?
Just changed your selectors a bit. Because of the inheritance of .logo img, .transition wasn't suffisant to erase .logo img properties.
.logo img
{
width: 100%;
transition:width 1s ease;
-moz-transition: width 1s ease;
-ms-transition: width 1s ease;
-webkit-transition: width 1s ease;
-o-transition: width 1s ease;
}
.logo .transition{
width: 50%;
transition:width 1s ease;
-moz-transition: width 1s ease;
-ms-transition: width 1s ease;
-webkit-transition: width 1s ease;
-o-transition: width 1s ease;
}

Carousel loose responsive behaviour with "image in div" zooming on hoover effect

Using flickity carousel I've created the following example here in codepen.io link. Here is CSS code I've implemented:
CSS
.image-hoover {
overflow: hidden;
}
.image-hoover img {
-moz-transform: scale(1.02);
-webkit-transform: scale(1.02);
transform: scale(1.02);
-webkit-transition: all 10s ease;
-moz-transition: all 10s ease;
-o-transition: all 10s ease;
-ms-transition: all 10s ease;
transition: all 10s ease;
}
.image-hoover:hover img {
-moz-transform: scale(1.06);
-webkit-transform: scale(1.06);
transform: scale(1.06);
-webkit-transition: all 10s linear;
-moz-transition: all 10s linear;
-o-transition: all 10s linear;
-ms-transition: all 10s linear;
transition: all 10s linear;
}
The issue I can't figure out is that images loose responsive behavior only until I turn off this part:
.image-hoover img {
-moz-transform: scale(1.02);
-webkit-transform: scale(1.02);
transform: scale(1.02);
-webkit-transition: all 10s ease;
-moz-transition: all 10s ease;
-o-transition: all 10s ease;
-ms-transition: all 10s ease;
transition: all 10s ease;
}
But in this case when you unhover the image returns back to it size very fast loosing the transition effect, can you please suggest how to figure out this issue?
1. Here the responsive behavior of image is present, but zoom effect on hoover loose transition.
2. In this example you can notice that transition works great, but if you resize the window images loose their responsive behaviour.
It happens because you said for the transition to apply on all actions, so the 10s transition happens also when the images change thier when the screen changes width.
You will need to change
-webkit-transition: all 10s ease;
-moz-transition: all 10s ease;
-o-transition: all 10s ease;
-ms-transition: all 10s ease;
transition: all 10s ease;
to
-webkit-transition: -webkit-transform: 10s ease;
-moz-transition: -moz-transform 10s ease;
-o-transition: transform 10s ease;
-ms-transition: transform 10s ease;
transition: transform 10s ease;
And remove the transition from the :hover.
This will now work.
Fiddle-http://codepen.io/anon/pen/eJWQRq?editors=110

jQuery hide().slideDown() does not work when I have CSS animations enabled

I'm new to this.
I used jQuery to make three divs (buttons) slideDown at page load. Then I made them expand a little (downwards) when mouseover'd. This worked well in Safari but not in Firefox. So I changed around a few things.
Now I have CSS animations to make them expand on hover and a jQuery function to make them slideDown on load. But this slideDown doesn't seem to work properly.
HTML:
<div class="header">
<div class="button_container">
<div class="header_button home_button">Back to Home</div>
<div class="header_button projects_button">Projects</div>
<div class="header_button resume_button" >Resume</div>
</div>
</div>
CSS:
.header_button {
display: inline-block;
height: 130px;
line-height: 130px;
width: 300px;
background-color: lightgrey;
color: black;
box-shadow: 0 0 10px;
-moz-transition: 0.5s all ease-in-out;
-ms-transition: 0.5s all ease-in-out;
-webkit-transition: 0.5s all ease-in-out;
-o-transition: 0.5s all ease-in-out;
}
.header_button:hover {
background-color: lightyellow;
height: 140px;
-moz-transition: 0.5s all ease-in-out;
-ms-transition: 0.5s all ease-in-out;
-webkit-transition: 0.5s all ease-in-out;
-o-transition: 0.5s all ease-in-out;
}
Some of the stuff has been copy-pasted from all over Stack Overflow. But now I've got the hover-expand thing working.
jQuery:
$(document).ready(function() {
$('.header_button').hide().slideDown('slow');
});
Convenient jsFiddle.
Updated Fiddle
Check this code,
$(document).ready(function() {
$('.header_button').parent().hide().slideDown('slow');
});
Though you hide .header_button it has parent <a> which is still visible.

Categories