I have some buttons with their CSS style.
When an animation starts I would like to change their style for the duration of the animation.
Stuff like changing the color, changing the pointer, changing the hover; to make them look "disabled" basically.
I have a global var which is "true" while the animations runs, and turns "false" when the animation is not running.
In order to achieve this goal, I have tried many things, but none of them worked, I tried:
changing the name of the class based on the var value, and create two different CSS styles -> didn't work because it didn't get updated with the change of the var
changing the style within REACT inside the function when the animation is called and changing it back when it's over. Using: document.getElementById("firstOne").style =
The second option it's the only one that actually worked well. The problem I can't edit back the hover to where it was before.
The question:
Is there a way to change the hover from React? Something like:
document.getElementById("firstOne").style = ;
If not, is there a way to just tell it "from now just follow the style written on the CSS file"?. To kind of setting the style back to before.
If not, any other ideas on how to achieve my goal?
Thank you
Related
I have an element that I want to add multiple inline filter styles on top of at different times.
The code I have now always resets the inline style so that whatever I set last is all that is there.
Here is an example snippet:
$("div").css("-webkit-filter","grayscale(1)");
$("div").css("-webkit-filter","blur(5px)");
.box{background:blue; width:100px; height:100px;}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="box"></div>
You can see that i'm setting grayscale first and at that time it turns black. Then I set blur second, but it erases the grayscale filter and turns it back to blue then it blurs.
I want both grayscale and blur to be applied.
The issue is that you're overwriting the previous style since they both use the same property. Try putting them together in the same statement like so:
$("div").css("-webkit-filter","blur(5px) grayscale(1)");
EDIT: If you need to apply them at different times, try this:
$("div").css("-webkit-filter","grayscale(1)");
$("div").css("-webkit-filter","blur(5px) grayscale(1)");
This will set the grayscale first and then preserve it by reapplying it with the blur effect as well
This will take the current css and append the new stuff.
var $div = $("div");
$div.css($div.css() + "-webkit-filter","blur(5px)");
You may want to add both filters in one line, as you can see here:
https://developer.mozilla.org/en/docs/Web/CSS/filter
Jquery wants to overwrite the css if your setting the same property.
This question also addresses a similar problem, doesn't seem like a very clean solution though.
Don't overwrite css properties, but add to them with jQuery
I have a container with a light blue background on my page and I would like for the background to get sequentially darker with each click. At this point, I'm happily setting my array of colors manually (we'll leave that question for another day) but I'm unable to get the background color to change or iterate over the array like I would like.
Currently, I'm getting alerts that there was an error in parsing my background color. I've tried setting background-color for .content in the css document and removing it, but neither way works (except if I remove it, then there's no background color at all)
Here's a rough sense of the code I have so far. I built it based on this jsfiddle from another thread, though it does not match entirely: http://jsfiddle.net/arunpjohny/3eGM5/
$(document).ready(function() {
var blues = ['#c4c4fd', '#5d5dbc'],
counter = 0;
$(".content").click(function() {
$(".content").animate({
backgroundColor: blues[counter++]});
#the text in this div also changes on click, so here's my animation for that.
#This is working fine, but I figured I'd include it just to be safe
var current = $('.active');
var next = current.next('.section');
if(next.length === 0) {
next = $('.section').first();
};
current.fadeOut(400).removeClass('active');
next.delay(100).fadeIn(1500).addClass('active');
});
});
Is there an obvious solution to this that I'm missing? I'm still pretty new to jQuery and putting everything together, so any advice or any direction you can point me in would be greatly appreciated!
Your color isn't being animated because you need to use the jQuery Color plugin to animate colors.
So you'd need to include the jquery color plugin in your markup and then change your animate code to look similar to this.
$("#block").animate({
backgroundColor: $.Color(blues[counter++])
}, 1500 );
I am using animate.css for a feed. I have a div named feed that uses uses the slideInLeft class, remains for 3 seconds, then uses the fadeOut class. At this point, I need to change the content of the div and start again. Here's what I've got:
HTML:
<div id="feed"></div>
JS:
var myCars=new Array("Saab","Volvo","BMW");
var wIndex = 0;
$('#feed').text(myCars[wIndex]);
setInterval(function () {
++wIndex;
if (wIndex >= myCars.length) {
wIndex = 0;
}
$('#feed').removeClass('animated slideInLeft');
$('#feed').addClass('animated fadeOut').addClass('hidden');
$('#feed').text(myCars[wIndex]);
$('#feed').removeClass('animated fadeOut').removeClass('hidden');
$('#feed').addClass('animated slideInLeft');
}, 3000);
http://jsfiddle.net/tjfo/5a3SL/
The initial change from the first element in the array to the second works properly, fade out, slide in. All the following transitions just change the text in the div with no fade out, slide in. Animate.css is the preferred method for completing this task. Can anyone help figure out how to make it work properly?
Thanks!
I think you're looking to remove the animated and slideInLeft classes prior to applying subsequent classes. Maybe remove those classes right off, then in a timeout of say, 25ms, do the rest of the logic.
Here's a demo: http://jsfiddle.net/5a3SL/3.
When animating with CSS this is a fairly common thing since you need to give the browser time to calculate the new layout without those classes before applying new classes, otherwise the correct state won't exist in the layout for the new class to properly animate.
Also, that honestly seems like too much CSS for a simple animation... the trickiest thing about animations is having to re-write your CSS declarations for 4 different vendor prefixes as well as the standard declaration.
Another way to handle this would be to set a timeout at the end of the loop that is at least as long as the animation (the slide-in) and remove the unnecessary classes then.
First off: I'm aware of the jQuery.css() function, but it doesn't work in my case. I'll explain why.
I have a jQuery color picker being used to change the highlighting of a website. I want to apply that color picker to the border of an element which only shows on hover.
The jQuery.css() function only applies the CSS to elements it finds, and does not work on the :hover CSS attribute.
I've tried adding a CSS class which I toggle on the hover, but it comes back to the same problem: I'm trying to change ONLY the hover value.
There's got to be a way to do this, but I've been searching StackOverflow and Google for the better part of an hour now, so I'm invoking xkcd #627
Use the hover event to achieve the same results.
$('selector').hover( function(){
//A function to execute when the mouse pointer enters the element.
$(this).css('property','value');
}, function(){
//A function to execute when the mouse pointer leaves the element.
$(this).css('property','value');
});
I'm adding this as an alternative answer.
If you need to dynamically change your CSS then there is something wrong with your CSS. It's very strange that you need a definition, that you can't toggle with a class and has to be generated dynamically.
Let's say you have a widget that can be in two modes: inactive or active. When it's active elements in it should respond visually to a hover event, when it's not, they shouldn't.
<div id="my-widget" class="my-widget-container">
<div class="element">Something to look at</div>
</div>
CSS
.my-widget-container .element { background-color: #ffffff; }
.my-widget-container.active .element:hover { background-color: #00ff00; }
You switch the mode by:
$("#my-widget").addClass("active");
This will activate the :hover line for the element which now appears interactive.
If I knew more about your situation I could perhaps fix a fitting solution.
Also, jQuery.css is poorly named, perhaps jQuery.style would be a better name since that is exactly what it does.
Im looking for a way to change the background image of a div using jQuery BUT only amending it, not totally changing it.
Let me explain.
Im using http://jqueryui.com/demos/sortable/#portlets to show some div's that open and close. Now when you click the portlet header it opens and closes the content below.
Inside the portlet header i have a child div which shows an arrow (either up or down) depending on the current state of the content. I need a way of changing the background image on this child div by adding on "-visible" onto the end of the url for the background image.
I wouldnt even know where to start with doing this, but i have added some code below for you to look at.
http://jsfiddle.net/45jZU/
From the fiddle there, i need to alter the background image of the portlet-arrow div inside portlet header. I can not simply change the background image all together, but i have simplified it down to post on here.
I hope this isnt too narrow to not be of use to anyone else on stackoverflow.
Thanks
Maybe I'm missing something here, but can't you use the .css attribute modifier for the selected jQuery object? Something like:
var current_background = $("#my-div").css("background-image");
$("#my-div").css("background-image", current_background + "-visible");
If you're looking to modify the class names themselves, you can try mess around with the .toggleClass(), .hasClass(), .addClass() and .removeClass() methods in jQuery.
I hope this helps, but let me know if I've missed the mark here completely!
I would personnaly go for using css classes to change the background image. If you decide to change the image afterwards, you won't have to alter your javascript. It is a better solution to use javascript to code the behavior of the widget, not the visual aspect.
So you have the following css:
.portlet-header {
background-image: url(<an image>);
}
.portlet-header.collapsed {
background-image: url(<an other one>);
}
Add this line to your javascript to toggle the collapsed class:
$(".portlet-header").click(function() {
...
$(this).parent().toggleClass('collapsed');
});
If you widgets starts collapsed, initially add the class.
DEMO