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');
Related
I am trying to slide down and slide up a div.At the time of loading the div will be kept disappeared/hide.
In this regard I used .hide() to keep the div disappeared/hide at the time of loading and after that I used .slideDown() to slide down and .slideUp() slide up the div.
My problem is when the page loads that div appeared for a moment like 1 millisecond after that it disappears. But I would like to keep the div disappeared/hide at the time of loading.
How can I solve the problem ??
You want to hide a specific div at page load. You don't need any jQuery/JS to do so.
Therefore, as per my comment, use CSS only:
div {
display: none;
}
You can use the css method to do this. At the time of load, add a class called "hidden" then, after the page fully loaded, remove that class and use fade in/fade out.
something like this:
$(documnet).ready(function() {
$("#element").addClass("hidden");
$("#element").fadeIn();
$("element").fadeOut();
});
Use the addClass property, to add a class to hide your div, then fade it back into view.
First add display:none; in your CSS file.
div {
display:none;
}
And add this script
$('div').slideDown().delay(300).slideUp();
If your are getting the same problem again, then it means your CSS file is taking more time to load, in this case you can add in-line style.
<div style="display:none"></div>
I currently use this JS animation plugin: http://www.2meter3.de/code/hoverFlow/ and the distinct result I like is the orange example. As far as I understand CSS transitions can only do the yellow example.
Is there a way to replicate this purely with CSS?
If not, then s there a way to use CSS transitions, but controlled by JS (jQuery) using the same principle (a good mix of both worlds)?
Maybe this could help my case: http://cortys.de/cssAnimate/
As far as I can see, that is not possible with CSS alone.
There is a trick to make the animation run to the end on hover by running another invisible animation on the element, but that doesn't work if you want to animate it back.
With a little bit of Javascript you can add a class to the element when the mouse hovers, then remove the class when the animation is complete:
$('div').mouseenter(function(){
$(this).addClass('animate');
}).on('transitionend', function(){
$(this).removeClass('animate');
});
Demo: http://jsfiddle.net/Guffa/oq83suw3/
However, it seems that the transition end event isn't always triggered, so the elements can get stuck with the class added to them. You can use a timeout to remove the class instead:
$('div').mouseenter(function(){
var e = $(this);
e.addClass('animate');
window.setTimeout(function(){
e.removeClass('animate');
}, 300);
});
Demo: http://jsfiddle.net/Guffa/u3c2knfj/
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.
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...
I have a DIV that is set do display:none from CSS and it's supposed to be made visible (style.display = '';) at some point by javascript.
The problem is that if I put the display:none in the CSS file the javascript does not seem to have any effect. I have also tried changing the background color instead of the display property, and that works.
I have the code running here (just press the edit link).
I really thank you for taking the time to look into this.
Set it to block or inline using Javascript.
Writing style.display = "" will clear any display set in the inline style, and cause it to revert to whatever it inherited from CSS.
Alternatively, you can change the element's className using Javascript so that the CSS rule no longer applies.
This is because style.display = '' only affects inline styles on an element. It doesn't change the style sheet.
You should set it to whatever display you need:
style.display = 'block';
or add a class that represents the style you want.
other way to hide content is use opacity=0 and to again make visible use opacity=1 thats it....!!!