I am designing a website and for effects I came across the below set of jquery code for achieve text color change with animation. But it doesn't work and I am not sure what is wrong.
JSFIDDLE
Below is the code that I'm currently experiencing the issue with:
jQuery:
$('.list-5 li a').hover(function() {
$(this).stop().animate({ color: '#fff' })
}, function() {
$(this).stop().animate({ color: '#0e1b23' })
})
HTML:
<div class="list-5">
<ul>
<li>
Hello world
</li>
</ul>
</div>
#FFFF is an invalid color. Use either #FFF or #FFFFFF.
Also, the default jQuery .animate does not animate colors. You'll have to use jQuery UI for that (or the Color plugin).
Demo using the color plugin: http://jsfiddle.net/FMTDp/13/
Demo using jQuery UI: http://jsfiddle.net/FMTDp/15/
You can't animate colors!
.animate({
color: '#ffff'
});
unless you add a reference to jQuery UI.
All animated properties should be animated to a single numeric value, except as noted below; most properties that are non-numeric cannot be animated using basic jQuery functionality (For example, width, height, or left can be animated but background-color cannot be, unless the jQuery.Color() plugin is used).
Working DEMO using jQuery UI
You need to use jQuery UI or jQuery plugin to animate color. You are also using wrong color code, use #fff or #ffffff.
From animate:
For example, width, height, or left can be animated but
background-color cannot be, unless the jQuery.Color() plugin is used
Note: The jQuery UI project extends the .animate() method by allowing
some non-numeric styles such as colors to be animated. The project
also includes mechanisms for specifying animations through CSS classes
rather than individual attributes.
Related
I'm using date picker in materialize design and I'm trying to change background-color using jQuery.
Materialize Calendar
I tried with this line and it doesn't work
$(".picker__weekday-display").css("color", "#FF0F0F", "important");
I need to use JavaScript because I have to change my color dynamically.
Your usage of $.css() is incorrect - and you'll also need to use background or background-color instead of color.
You can write
$(".picker__weekday-display").css("background-color", "#FF0F0F !important")
or
$(".picker__weekday-display").css({"background-color": "#FF0F0F !important"})
See the API:
http://api.jquery.com/css/#css-propertyName-value
However, the API also states:
Note: .css() ignores !important declarations. So, the statement $( "p" ).css( "color", "red !important" ) does not turn the color of all paragraphs in the page to red. It's strongly advised to use classes instead; otherwise use a jQuery plugin.
So you might be better off to add a class instead:
$(".picker__weekday-display").addClass("my-class");
CSS:
.my-class {
background-color: #FF0F0F !important;
}
Are you sure you added the javascript in your $(document).ready? If the calendar was not initialize it will not find your class.
color is foreground (text) color. Use backgroundColor.
So I'd like to use jQuery ui effect easeOutBounce on my mobile menu, the script goes as follows:
$("#navbar-checkbox, .mobile-menu-wrapper .13").click(function(){
$("#mobile-nav").({ display: 'block' }, 600, 'easeOutBounce');
})
but this doesn't work, it doesn't even change the css to display: block.
How can I use display block with animation?
Can you please show me how to apply easeOutBounce to it as well
Thank you.
So, you need to use jQuerys .css() style manipulation in order to set the style of the element that is intended to be animated. This is done first.
After that, to get the animation to work as you want it too, you want .slideDown() to be triggered after the css attribute is set on the element, with the duration and the specified effect (easeOutBounce)
Code snippet:
$("#mobile-nav").css('display','block').slideDown(600, 'easeOutBounce');
I have just updated my jquery mobile code from 1.3.1 to 1.4.2 in my Framework.
The challenge I am facing is to style my data-icons conditionally based on developer's parameters.
code for 1.3.1,
myButton.find('.ui-icon').css('background-color',iconColor);
in 1.4.2 jQuery uses pseudo class :after for the icons and since its not a part of the DOM it is inaccessible by JavaScript.
I can achieve it(but don't want to do it for the performance) by changing the DOM of the icon element?
Is there any other way?
If you use case allows you to select from a pre-determined list of icon background colors, you can set classes for each color and then switch them out in code.
Given a button with an icon:
<button id="btnIcon" class="ui-btn ui-icon-delete ui-btn-icon-left ">Button</button>
Here are 3 classes that set the background color to red, green , and blue respectively:
.redIcon:after {
background-color: #97080E;
}
.greenIcon:after {
background-color: #488C13;
}
.blueIcon:after {
background-color: #1B55C0;
}
Then in script, you remove all color classes and then add the one you want to take effect:
$("#btnIcon").removeClass("redIcon greenIcon blueIcon").addClass(className);
Here is a working DEMO
Click the buttons marked red, green, and blue to see the icon update.
I have started working on a poetry app for the iOS platform which highlights the relevant text as the recording plays (as selected by the user). The user will see a list of options to play the audio (i.e. starting line, ending line), and as the app plays the recording, the relevant line will also be highlighted. My question is this:
My CSS code which is responsible for highlighting the relevant text looks like this:
#container {
positioon:relative;
}
#highlight {
position:absolute;
width:75px;
height:75px;
top:75px;
left:75px;
background: rgba(255, 0, 0, 0.4);
}
The values for width, height, top, left, and background are not static, they are dynamic (i.e. they will differ for each line). Is there a way for me to pass these values to the CSS from the JavaScript function that is calling it (which would in turn, be pass to the JavaScript from Objective-C)? Just wondering.
May I propose a different solution? I hope this is a little easier than your current attempt.
If you have some HTML like this:
<div class="lyrics">
<div class="line">I went down to the demonstration</div>
<div class="line">To get my fair share of abuse</div>
<div class="line">Singing, We're gonna vent our frustration</div>
<div class="line">If we don't we're gonna blow a 50-amp fuse</div>
</div>
So that each 'line' is it's own element, then it makes it very easy for your code to cycle through the lyrics line by line at an interval. This could be song lyrics, sheet music, even audio captions...
As you cycle through the lines you can target each one and add and remove classes. You don't have to use the jQuery library, but I use it pretty extensively so you could do something like:
// before transition
$(this).removeClass('highlight');
$(this).next('.line').addClass('highlight');
Then in CSS just give the ".line.highlight" or ".lyrics .highlight" some style definitions:
.lyrics .highlight {
font-weight:bold;
background:#ccc;
}
Things like the width and height would then be inherited, and you could reference them by calling:
$(this).css('width');
jQuery - css() - http://api.jquery.com/css/
jQuery - next() - http://api.jquery.com/next/
jQuery - removeClass() - http://api.jquery.com/removeclass/
jQuery - addClass() - http://api.jquery.com/addclass/
yes, what you do is in your javascript, look up the value.
$("#highlight").width()
for example, will get you the actual width.
Use jQuery to get and manipulate CSS properties of elements, as detailed here
You can add css to an element using jquery:
$("highlight").css('width','200px');
and you can replace 'width' with any valid css property, as well as pass in multiple properties.
I have a button that, when hovered over, shows a <span> that is otherwise hidden. What I'm trying to figure out is how to transition the button's expansion on :hover so it's more smooth. I tried using CSS3 transitions but couldn't quite get it down. Plus I don't know if that's the best solution anyway.
EDIT: I added some jQuery but must have something wrong. Here's the script I used, after reading a previous answer here (which I'll reference if I can find it again):
$('a:has(span)').hover(
function() { $('span', this).fadeIn(); },
function() { $('span', this).fadeOut(); },
);
I've created a Fiddle: http://jsfiddle.net/UYexr/. Can anyone help me out?
If I were you I would avoid using CSS3 simply because of its lack of support; given that I would probably stick to JS animation.
The best way I would see to do this is to make the span have display:inline-block; with a defined width. Then you can use a javascript animation library to animate the span's display.
Personally, I would go about using jQuery's animate method. Although there are plenty of js animation libraries...