Closed. This question needs debugging details. It is not currently accepting answers.
Edit the question to include desired behavior, a specific problem or error, and the shortest code necessary to reproduce the problem. This will help others answer the question.
Closed 7 years ago.
Improve this question
I would like to change some text on hover with a flipping animation.
The number "1" would be displayed and on hover the number flip horizontally to become a "0".
When the hover out, the number would return to "1"
I can't success to make it fluid.
Any help, script which you do it?
Thanks in advance!
UPDATE : https://jsfiddle.net/4t7ogtfz/
Here's what I try.
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script>
$("p").hover(function(){
$("p").text('0');
});
</script>
p{
font-size:45px;
display:inline-block;
}
p:hover{
transition: all ease-in 1s 0s;
-webkit-transition: all ease-in 1s 0s;
-webkit-transform: rotatex(180deg);
transform: rotatex(180deg);
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<p>1</p>
Make backface visibility hidden, use two elements instead of one, position:absolute them on top of eachother, put them in a containing element - when the containing element is hovered, trigger your flip transition.
Read this:
http://davidwalsh.name/css-flip
Related
Closed. This question does not meet Stack Overflow guidelines. It is not currently accepting answers.
We don’t allow questions seeking recommendations for books, tools, software libraries, and more. You can edit the question so it can be answered with facts and citations.
Closed 8 years ago.
Improve this question
I am working on a site .As you can see there's a menu item called Digital Marketing. The item has a submenu called Digital Marketing Consultancy.i want the submenus like in any other websites with the dropdown effect like when we hover the menu item the submenus dropsdown.
eg : like the menu here.
I have tried giving
.sub-menu{display:none;}
.sub-menu:hover{display:block;}
here is the fiddle .how can i make it like the menu effects in other sites.Please help.Thanks!!
updated fiddle
Pure css solution is CSS(3) transitions.
http://jsfiddle.net/9gjbfvwy/
use width and height 0, with overflow hidden.
Use CSS3 transitation to set them to auto.
See fiddle (it's your code, with 3 additions)
ul.sub-menu{height:0;width:0;overflow:hidden;}
.menu-item:hover ul.sub-menu{background:orange;width:200px;height:50px;}
ul.sub-menu {
-webkit-transition: all 0.3s ease-in-out;
-moz-transition: all 0.3s ease-in-out;
-o-transition: all 0.3s ease-in-out;
transition: all 0.3s ease-in-out;
}
.sub-menu is your submenu, so you need to fire your hover on your main menu item, not on your submenu item.
Add this to your css:
ul#menu-main li ul.sub-menu{
display:none;
}
ul#menu-main li:hover ul.sub-menu{
display:block;
}
Working jsFiddle: http://jsfiddle.net/wyy7e61o/1/
You should initially hide all the submenus and show them when hovering the parent menu.
Like
.sub-menu {
display: none;
}
.menu-item:hover > ul.sub-menu {
display: block;
}
Check Updated fiddle here
http://jsfiddle.net/wyy7e61o/6/
This question already has answers here:
Animate background image change with jQuery
(9 answers)
Closed 8 years ago.
My HEADER element has a background image and I need to swap it to another image after a 3 second delay, I have looked all over the internet and I cannot find a solution! I have tried CSS3 and Jquery and I just cant get it to work.
Because of the way the website is built, it has to be the background image of the element that changes and not a nested Div within the HEADER element.
--- SOLVED / SOLUTION ---
JS
$(document).ready(function() {
$("header").delay(5000).queue(function() {
$(this).css({
"background-image": "url(<?php bloginfo('template_url') ?>/img/header-boy-hover.jpg)"
});
});
});
CSS
header {
-webkit-transition:all 1s ease-in;
-moz-transition:all 1s ease-in;
-o-transition:all 1s ease-in;
-ms-transition:all 1s ease-in;
transition:all 1s ease-in;
}
A similar question has been asked before - This should give you an answer
Change CSS background-image with different intervals via jQuery
Closed. This question needs to be more focused. It is not currently accepting answers.
Want to improve this question? Update the question so it focuses on one problem only by editing this post.
Closed 8 years ago.
Improve this question
So say I want div 1 to appear after 2 seconds, div 2 to appear after 7 seconds, and div 3 to appear after 15 seconds.
Is there a way for me to add an inline style element that will make the divs go from hidden but occupying space to fully visible.
I've been searching and most things I've found are hover/click triggered. I can't seem to find anything with a time trigger.
Thank you.
Edit: To make this more clear, I am looking for any kind of code that has a time delay to appear. When I search transition, I get a bunch of code based on actions, like a click or a hover. I am not looking for a user action to trigger this, just a time.
When I search for animation, I get a bunch of results about moving images, which I also do not need.
When I search for time delay, I get a bunch of results about time delay transitions, which is how long after the user action occurs does the transition occur which still requires user input, and I do not want user input.
I am more asking what I should be looking for, if there is a word for it or something you are familiar that does this. I didn't provide any code because I don't want you coding me something. I'm asking for lead, because it is frustrating that I cannot find the proper word to identify what I need.
you can either use a css transition to animate the visibility property after a set delay in your stylesheet, or you can change the visibility property using JS and setTimeout();
HTML
<div id="div1" style="visibility:hidden;"></div>
JS
setTimeout(function(){
document.getElementById('div1').style.visibility = "visible";
},1000);
This sets a callback to override the css property after 1000 ms, or 1 second.
For a pure css solution we can use this instead. We need to provide multiples of a few properties, for cross platform compatibility.
#-webkit-keyframes fadeIn { from { opacity:0; } to { opacity:1; } }
#-moz-keyframes fadeIn { from { opacity:0; } to { opacity:1; } }
#keyframes fadeIn { from { opacity:0; } to { opacity:1; } }
.fade-in {
opacity:0;
-webkit-animation:fadeIn ease-in 1;
-moz-animation:fadeIn ease-in 1;
animation:fadeIn ease-in 1;
-webkit-animation-fill-mode:forwards;
-moz-animation-fill-mode:forwards;
animation-fill-mode:forwards;
-webkit-animation-duration:1s;
-moz-animation-duration:1s;
animation-duration:1s;
}
So this class called fade-in adds a 1s animation to any element it's added to, it will start as soon as it's loaded as it is. It's opacity based so the object will take up space when it's invisible, if you don't want this you need to use a variation on display:none.
A delay can be added to an element using
-webkit-animation-delay: 2s;
-moz-animation-delay: 2s;
animation-delay: 2s;
Just set that with a different value for each 'slide' to get them to fade in at different times.
If you want the space taken up - meaning you don't want things collapsed up, I would create the div, and set it's display to none, and then the opacity to 0. This will hide the element, but it will still take up physical space on your page.
Then I would create a css class called "show" or something like that:
CSS:
.show {
opacity: 1;
transition: opacity 1s ease-in-out;
-webkit-transition: opacity 1s ease-in-out;
-moz-transition: opacity 1s ease-in-out;
-ms-transition: opacity 1s ease-in-out;
-o-transition: opacity 1s ease-in-out;
}
Then with jQuery (or javascript) you could use either setInterval, or setTimeOut. In your timeout function, you could dynamiclly assign the "show" class to each element. This would fade each element in after "x" seconds you specify.
Something like this:
jQuery:
$(function() {
setTimeout(function(){
showElement();
}, 3000);
function showElement() {
$('my-div').toggleClass('show');
}
});
Closed. This question does not meet Stack Overflow guidelines. It is not currently accepting answers.
This question appears to be off-topic because it lacks sufficient information to diagnose the problem. Describe your problem in more detail or include a minimal example in the question itself.
Closed 8 years ago.
Improve this question
I am completely new to the jquery scene, and so am having some trouble trying to figure this out. My problem is:
I am creating a website for a project, and this website is based of a square (700px by 700px) that has been divided into 4 smaller squares - all 350px by 350px.
What I want to do is have each of these smaller squares have a panel covering them, that when clicked, move away to reveal the content behind them. The two panels on the left side would slide to the left and disappear, and the two on the right would slide to the right and disappear.
If possible I would like only one panel to disappear at a time. So as one would click a new panel, the previous one would slid back into position, hiding its content again.
Any help would be greatly appreciated!
There are many ways to do the sort of thing you're interested in. CSS transitions have already been mentioned. I've included a working example but it is very basic - it should get you moving in the right direction. Please take a look at the links below - they've got a lot of great information.
If you have four elements, and the main function of the covers is just to cover, you could use :after (or :before) CSS pseudo-elements. Here's what that HTML markup could look like if your panels were li elements:
<ul>
<li id="panelOne">One</li>
<li id="panelTwo">Two</li>
<li id="panelThree">Three</li>
<li id="panelFour">Four</li>
</ul>
Since the covers are only there to hide your four panels and they're pseudo-elements, you'd style them in your CSS. You could start by styling your HTML elements:
ul {
display: block;
background: black;
width: 700px;
height: 700px;
margin: 0 auto;
}
li {
float: left;
position: relative;
background: white;
border: 1px solid black;
width: 350px;
height: 350px;
}
Then style your :after covers:
li:after {
display: block;
/*the background color is just to make the covers more visible */
background: red;
position: absolute;
top: 0;
left: 0;
width: 350px;
height: 350px;
content: "";
}
If you use jQuery to add a class (for example, ".clicked") to one panel at a time, you'd style the .clicked pseudo-elements so they move to the left or right:
li#panelOne.clicked:after, li#panelThree.clicked:after {
-webkit-transform: translateX(-350px);
-moz-transform: translateX(-350px);
-ms-transform: translateX(-350px);
-o-transform: translateX(-350px);
transform: translateX(-350px);
}
li#panelTwo.clicked:after, li#panelFour.clicked:after {
-webkit-transform: translateX(350px);
-moz-transform: translateX(350px);
-ms-transform: translateX(350px);
-o-transform: translateX(350px);
transform: translateX(350px);
}
And use jQuery to add or remove the class:
$( 'li' ).click(function(){
//first remove the class from ALL panels
$( 'li' ).removeClass( 'clicked' );
//then add to the panel that's been clicked
$(this).addClass( 'clicked' );
});
And one more step: since you want the covers to slide to the left or right, you'll need to add CSS transitions to achieve that. You'd place them in your :after pseudo-element styles:
-webkit-transition: -webkit-transform 500ms ease-out 0s;
-moz-transition: -moz-transform 500ms ease-out 0s;
-o-transition: -o-transform 500ms ease-out 0s;
transition: transform 500ms ease-out 0s;
And here's how that would all look in a jsfiddle: http://jsfiddle.net/rt9d5/10/embedded/result/
Try using the Jquery UI Accordion http://jqueryui.com/accordion
You can create multiple collapsible panels and set whether it to have one panel open at a time (or multiple if you want).
My Suggestion would be to look at this, do a little research, and if you have any more questions post a more specific question on stackoverflow.
Closed. This question does not meet Stack Overflow guidelines. It is not currently accepting answers.
Questions asking for code must demonstrate a minimal understanding of the problem being solved. Include attempted solutions, why they didn't work, and the expected results. See also: Stack Overflow question checklist
Closed 9 years ago.
Improve this question
I've been digging through the source of wallbase.cc trying to find out how to style the input box like that of the one on their homepage. I'm mainly focusing on the cursor that blinks quickly, and the text that seems animated.
From a quick glance at the source code, it looks like they're using a jQuery plugin called Fancy Input
They aren't styling a text input at all, is the thing. Instead, they are using a text input to trigger javascript that renders animated DOM elements. This level of customization cannot be done with CSS alone.
If you type a bit, and then inspect the DOM you will see these elements as a sibling node to the text input:
<div>
<span>t</span>
<span>e</span>
<span>s</span>
<span>t</span>
<span>i</span>
<span>n</span>
<span>g</span>
<span> </span>
<span>1</span>
<span>2</span>
<span>3</span>
<b class="caret" style="height: 25px;"></b>
</div>
As you type or delete characters, javascript is adding or removing each character as a new <span> element, and then placing the <b class="caret"> element at the end, which the the animated blinking cursor.
Not that each character is a unique element, as well as the caret, they can animated with CSS transitions. Transitions allow for animations of things like size and opacity, which is precisely what they are doing.
The caret is using an animation. Along with some inherited styles these are the two main classes for it (in a hovered state):
.searchmainbar .maininput:focus ~ div .caret {
opacity: .8;
box-shadow: 0 0 8px #fff;
-webkit-animation: 0.4s 40ms caret infinite;
animation: 0.4s 40ms caret infinite;
}
.searchmainbar .maininput:focus ~ div .caret {
opacity: .8;
box-shadow: 0 0 8px #fff;
-webkit-animation: 0.4s 40ms caret infinite;
animation: 0.4s 40ms caret infinite;
}
/* Character animation */
.fancyInput>div span {
-webkit-transition: 200ms cubic-bezier(0.08, 0.6, 0.56, 1.4);
transition: 200ms cubic-bezier(0.08, 0.6, 0.56, 1.4);
display: inline-block;
position: relative;
}
#keyframes caret{50%{opacity:0.1;transform:scaleY(0.8)}}
<div><span>H</span><b class="caret" style="height: 25px;">​</b></div>
A quick way to find it in chrome is to right click on the element in the inspector and force the element into a :focus state.