I found this code:
$('li input:checked').click(function() {
$(this).parent().parent().toggleClass("uncheckedBoxBGColor", 1000);
});
It's working well, when a click the element for the first time. It fades the background color, but when I click it again, it delays for 1000 ms, and then flashes the other background color. I want it animated when it has the class, and when not, not only when clicked for the first time.
This is easy with CSS transitions:
JS:
$('li input:checked').click(function() {
$(this).parent().parent().toggleClass("uncheckedBoxBGColor", 1000);
});
CSS:
.uncheckedBoxBGColor {
background-color: orange;
/*other properties*/
transition: background-color .3s;
}
This will add the effect whenever the class is turned ON, but when it doesn't have that class then there are no transitions defined. So instead, you can turn on this transition for ALL <LI> elements like so:
CSS:
li { transition: background-color .3s; }
OR for all <INPUT> elements following an <LI><INPUT> combination:
li input { transition: background-color .3s; }
You get the idea of it..
The jquery.toggleClass function isn't made for fading anyhow. See http://api.jquery.com/toggleClass/ for more details.
If you want to fade in/out the background color, try using the CSS3 transition feature like explained at Mozilla's side: https://developer.mozilla.org/en-US/docs/Web/Guide/CSS/Using_CSS_transitions.
Maybe because you are using "input:checked"
try using
$('li input[type=checkbox]').click(function () {
$(this).parent().parent().toggleClass("uncheckedBoxBGColor", 1000);
});
this is working for me.
Related
So I used this code from Justin Aguilar's CSS3 Animation Cheat Sheet to activate an animation on a button when I hover over it:
<div id="object" class="pulse">
<script>
$('#animatedElement').hover(function() {
$(this).addClass("pulse");
});
</script>
The problem is that the animation just continues even when I am no longer hovering over the button. What can I do to make a button animate every time a user hovers over it, but stop when they move the mouse away? Whenever I tried to tweak it with anything involving .stop, it just keeps the animation from playing at all.
I am new to coding and this has been a huge pain today, so any help would be very much appreciated! Thanks!
You don't need JavaScript for that at all.
Use CSS selectors. #animatedElement:hover in your case.
Here you go with one more solution
$('#animatedElement').hover(function() {
$(this).addClass("pulse");
}).mouseleave(function(){
$(this).removeClass("pulse");
});
.pulse {
background: #000;
color: #fff;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="animatedElement">Hover Me!!!</div>
Hope this will help you.
the hover() method accepts two callbacks: one for when the mouse enters the html element, and one for when it leaves. Therefore, you could simply add another callback to your function to remove the "pulse" class.
$('#animatedElement').hover(function() {
$(this).addClass("pulse");
},
function(){
$(this).removeClass("pulse");
});
Alternatively, you could just go with Alex's excellent answer.
You can use CSS to make an animation, for example, in this code:
.pulse {
background: GREEN;
border-radius: 6px
transition-property: background, border-radius;
transition-duration: 1s;
transition-timing-function: linear;
}
.pulse:hover {
background: BLACK;
border-radius: 50%;
}
You have set in css the start properties for the element, and transition declaration, in this example i'm going to do a transition in the background and the radius properties when hover on a element with pulse class.
I'm trying to use this jQuery function on an animated button is not really working, can I get help with that? Below are the codes
HTML
<button class="btn-rounded">Button</butto>
CSS
.btn-rounded{
color: black;
opacidity:.7;
border-radius:150px;
background-color:#FFF067;
}
JS
$("#img").addClass("animated bounce");
Your js is not targeting the button at all, but rather an element #img. Besides it simply adds the classes to the element immediately on page load, irregardless of action.
To trigger the button animation on click, you'll need to create an event handler to apply the classes to the button when clicked.
$('button.btn-rounded').on('click', function(){
$(this).addClass('animated bounce');
});
You could just skip the jQuery and use plain ol' vanilla CSS.
.btn-rounded {
color: black;
opacity:.7;
border-radius:150px;
background-color:#FFF067;
transform: translateY(0);
transition: transform .5s cubic-bezier(0.5, -2.5, 0.5, 3.5);
}
.btn-rounded:hover {
transform: translateY(-25%);
}
Now, if you hover over it this bad boy will bounce for ya. Don't forget to fix the opacity typo in your CSS and the the button typo in you HTML.
I want to toggle background-color and slideToggle on click. I also want a hover-over effect on all buttons. My hover-over effect stops working after the first click. I also haven't figured out a good way to toggle background-color as you will see by my code.
Here is my jsfiddle. This JavaScript code doesn't work if the same button is clicked twice:
$('#11').show().css({'background-color':'#cccccc'});
$('#22,#33,#44,#55,#66').show().css({'background-color':'white'});
Also, if you have any suggestions on how to make my JavaScript code cleaner/shorter, I'd like to see them.
With a little clean up you can simplify this whole thing a lot:
jquery
$(document).ready(function(){
$('.button')
.on('click', function () {
$('.button').not(this)
.removeClass('selected')
$('p.displayed').not($(this).next().next())
.slideUp()
.removeClass('displayed')
$(this)
.toggleClass('selected')
.next(/*br*/).next(/*p*/)
.slideToggle()
.addClass('displayed')
})
});
css
button.selected {
background-color: #ccc;
}
src: https://jsfiddle.net/yLr5equc/14/ (sorry, at first I forgot to hide the previous slideDown.. this is resolved now)
"Also, if you have any suggestions on how to my my javascipt
cleaning/shorter, I'm happy to listen. "
You don't need to repeat $(document).ready(function(){} every time for every new function/object. One $(document).ready(function(){} can store all your javascript/jquery code. That will shorten your code alot and make it less messy.
Like I did here: https://jsfiddle.net/yLr5equc/3/
Because the style defined in CSS has been overridden by jQuery-added inline style, therefore in .button:hover, add !important to background-color to make it the highest priority.
.button:hover {
background-color: #e6e6e6 !important;
cursor: pointer;
}
Updated solution: https://jsfiddle.net/yLr5equc/17/
No more !important as I answered above. I created the class .selected for .button and toggle it instead of inserting the style inline.
.button.selected {
background-color: #ccc;
}
I also have refactored the scripts, now shorter and work more effectively.
$(document).ready(function() {
$(".button").on("click", function() {
var $this = $(this),
$next = $(this).next(".slide");
if($next.hasClass("opening")) {
$this.removeClass("selected");
$next.slideUp("fast").removeClass("opening");
} else {
$this.addClass("selected");
$this.siblings().removeClass("selected");
$next.slideDown("fast").addClass("opening");
$next.siblings(".slide").slideUp("fast").removeClass("opening");
}
});
});
trying to animate a divs opacity when hovering some other element. First I tried it with display none/block, but it read somewhere it's impossible to make a transition for that.
This is a little complicated, because this is supposed to work on each element of the same type with a different id the same. (Picture gallery with a caption to appear on the bottom of the img element when the picture is hovered.)
The HTML structure is like this:
<article id="{PostID}">
<div class="post-content">
<a><img></a>
<div class="post-content--padded">
<p>Caption of the picture.</p>
</div>
</div>
</article>
First I went with a mouseover, mouseout approach added to the post-content div which looked like this:
onmouseover="document.getElementById('{PostID}').getElementsByClassName('post-content--padded')[0].style.opacity='1.0';" onmouseout="document.getElementById('{PostID}').getElementsByClassName('post-content--padded')[0].style.opacity='0.0';"
That worked, but there was no transition. I've set the CSS up with transition handlers to apply to all the css changes within post-content--padded like so:
-webkit-transition: all 0.3s;
-moz-transition: all 0.3s;
transition: all 0.3s;
This doesn't seem to affect the mouseover, mouseout opacity change I do, so I tried adding .animate() to that, without much success. Well I got post-content to fade in and out, but not post-content--padded
Different approach
That all didn't work so much. So I tried using the JQuery function hover().
Long story short I added this above the html in question:
<script type="text/javascript">
$(document).ready(function(){
$('#{PostID}.post-content').hover(
function(){ $('#{PostID}.post-content.post-content--padded').stop().animate({'opacity': '1'}, 'slow');},
function(){ $('#{PostID}.post-content.post-content--padded').stop().animate({'opacity': '0'}, 'slow');}
);
});
</script>
This just doesn't want to work though. Endless browsing of stackoverflow and other sources didn't seem to help me with this. Being stuck on this for over an hour I decided to simply ask. It cannot be that hard to add a hover > opactiy transition.
Hope I've not been clear and people understand my issue here.
you can do it just using css if you need only on hover
.post-content--padded{
opacity: 0;
-webkit-transition: all 2s;
-moz-transition: all 2s;
transition: all 2s;
}
.post-content:hover .post-content--padded{
opacity: 1;
-webkit-transition: all 2s;
-moz-transition: all 2s;
transition: all 2s;
}
see demo HERE
and if you want to use Jquery
$('.post-content--padded').hide();
$('.post-content').hover(function(){
$(this).find('.post-content--padded').fadeToggle(2000);
});
see demo HERE
I also worked on combining hover with animate and it worked like that:
in CSS opacity for "a" = 0
and in jQuery:
$("#classy").hover(function(){
$("#classy").animate({
opacity:"1"
},200);
}, function(){
$("#classy").animate({
opacity:"0"
},200);
});
Here is a jQuery method that works:
HTML
<div id='hover-me'>hover over me</div>
<div id='change-me'>I change opacity</div>
CSS
.hide {
opacity:0;
}
JS
$('#hover-me').hover( function() {
if ($('#change-me').hasClass('hide')) {
$('#change-me').removeClass('hide', 'slow');
} else {
$('#change-me').addClass('hide', 'slow');
}
});
jsFiddle Demo
*This is with jQueryUI included
i have multiple images, on hover on particular image i want to apply on that image only, it should not effect on other image.
More Explanation:
In this example(http://codepen.io/anon/pen/AnsqI), suppose i have multiple images & want to apply the certain effect on only on that image where i hove my mouse.
I am using class attribute...
<script>
$(function() {
//For grid view hover effect
$('.grid_content').hide()
$('.grid_container').hover(
// Over
function() {
$('.grid_content').fadeIn();
}
,
// Out
function() {
$('.grid_content').fadeOut();
}
);
//--js for grid view hover effect ends here
});
</script>
Something i have to apply like $this , i tried like($this.$('.grid_content').fadeOut();)but it did not work.
Somebody please help me.
Use this:
$('.container').hover(function(){
$('.content',this).fadeToggle();
});
Check this Demo http://codepen.io/anon/pen/BxbID
You could consider using CSS and the opacity attribute (or display). You could progressively enhance the hover effect with CSS3's transition property as well. There isn't necessarily a need for JS here, and I only added five lines of CSS (unprefixed) to achieve the same effect.
.content {
width: 100%;
height: 100%;
background: rgb(255,255,255,0.9);
padding: 5px 15px 10px 15px;
box-sizing: border-box;
opacity: 0;
transition: opacity .2s linear; /* CSS3 progressive enhancement */
}
.content:hover {
opacity: 1;
}
Depending on how you organize your HTML, you may need to make modifications, but the concept is the same.
Check out the demo: http://jsfiddle.net/NeEuP/1/
There are 2 ways to do this. You can either reference it using the this javascript keyword and surrounding it in a jQuery function:
$('.grid_container').hover(function(){
$(this).fadeIn();
, function(){
$(this).fadeOut();
});
Or you can:
$('.grid_container').hover(function(e){
$(e.currentTarget).fadeIn();
, function(e){
$(e.currentTarget)$(this).fadeOut();
});
... basically you're getting element through the event object. I personally prefer this method, because it's more flexible it doesn't depend on the actual scope (this depends on scope).