I want my div to become partially transparent 1 second after I hover cursor on it. When no longer hovering I want it to return to its default full opacity immediately without any time delay.
I know very very javascript so I don't know how to do this.
Any help much appreciated thanks in advance
Actually, you shouldn't use js in this case. CSS Transitions would be better, cause they are smoother and more efficient than js/jQuery animations.
Below you have example with 2 seconds delay on hover.
.btn{
display: inline-block;
padding: 5px 10px;
background: rgba(0,0,0,1);
color: #fff;
text-decoration: none;
-webkit-transition: background 0.5s ease 0s;
transition: background 0.5s ease 0s;
}
.btn:hover{
-webkit-transition: background 0.5s ease 2s;
transition: background 0.5s ease 2s;
background: rgba(0,0,0,0.5);
}
Text
Related
I want my navbar background color to change slowly from transparent to white as I hover it.
I'm using this script to hide the navbar as I scroll down and pop up as I scroll up and it works perfectly. manage to change the color on hover but without transition ...
can someone please help me to add transition?
please see
www.maimoncpa.com
Consider this code, involving nav
nav{
-webkit-transition: background-color 2s ease-out;
-moz-transition: background-color 2s ease-out;
-o-transition: background-color 2s ease-out;
transition: background-color 2s ease-out;
}
nav:hover {
background: white;
}
I hope my question makes sense, but what im trying to do is: show a div by transition. Meaning i want the div to slowly appear from top to bottom or from left to right, almost like a fade. Is this possible with either javascript or jquery?
It is possible, if i understand u need something like this:
http://jsfiddle.net/e5BuX/
$(document).ready(function(){
$(".cube").animate({left:"400px",opacity:"1"},2000);
});
If I understand the question correctly, the closest thing is the jQuery slideUp() or slideDown() methods. they are not a fade exactly, but like I said, probably the closest thing ( I am not a JavaScript/jQuery expert though).
here is a site that demonstrates how they look.
EDIT: Here are some other good examples of custom animations you can do with the animate() method
Hope that helps!
Its possible with vanilla javascript and jQuery.animate but it can also be done entirely css3 transition & animate. Take a look here for example
It can also be done only with css3. Here's a rough ideea.
HTML
<div class="im-a-div animate-me im-hidden">
<span class="center-me">I'm inside the div!</span>
</div>
<input id="show-the-div" type="button" value="Show div"/>
CSS
.im-a-div {
background: #ddd;
border: 1px solid #ccc;
border-radius: 5px;
height: 100px;
position: relative;
opacity: 1;
width: 400px;
}
.im-hidden {
margin-top: -100%;
opacity: 0;
}
.animate-me {
-webkit-transition: all 1000ms 0s ease-in-out;
-moz-transition: all 1000ms 0s ease-in-out;
-ms-transition: all 1000ms 0s ease-in-out;
transition: all 1000ms 0s ease-in-out;
}
So basically I float all my div elements (icons) to the left and margin left them to create space In between them and I display them inline. The problem I have now is that whenever I hover over one element(icon) the rest of the elements moves. Please can you explain what causes this, thanks a lot. Examples will be gladly appreciated.
css:
.facebookIc{
font-size: 80px;
margin-left: 120px;
-webkit-transition: font-size 0.3s linear;
}
i.icon-facebook-circled:hover{
color: #3b5998;
font-size: 90px;
-moz-transition: all 0.3s ease-in;
/* WebKit */
-webkit-transition: all 0.3s ease-in;
/* Opera */
-o-transition: all 0.3s ease-in;
/* Standard */
transition: all 0.3s ease-in;
}
.twitterIc{
font-size: 80px;
margin-left: 120px;
-webkit-transition: font-size 0.3s linear;
}
i.icon-twitter-circled:hover {
font-size: 90px;
color: #00aced;
-moz-transition: all 0.3s ease-in;
/* WebKit */
-webkit-transition: all 0.3s ease-in;
/* Opera */
-o-transition: all 0.3s ease-in;
/* Standard */
transition: all 0.3s ease-in;
}
.contactContent{
position: relative;
height: auto;
width:100%;
background: #b7d84b;
opacity: 0.8;
overflow:auto;
padding: 20px 20px;
}
html:
<section id = "contactContent" class="contactContent">
<div>
<i class="icon-gplus-circled gplusIc"></i>
<i class="icon-facebook-circled facebookIc"></i>
<i class="icon-mail-circled mailIc"></i>
<i class="icon-twitter-circled twitterIc"></i>
<i class="icon-soundcloud-circled soundcloudIc"></i>
</div>
</section>
There could be a number of factors, the most obvious would be in your CSS having a :hover set on the element to increase a font-size or change something which would affect its position or size.
We would need to see code to be sure and verify thats the problem.
EDIT
So looking through your code, i can see one major flaw. As i guessed the :hover was affecting the placement.
Your setting the font-size to be 80px and then on the hover, upping that to be 90px. That will then increase the size the container needs to be. Unless you set a max-height/width on the element or set the overflow to hidden it will always increase in size when you modify something that will increase in size, even by a single pixel.
Its hard to try and amend the code for you without seeing the full code (the piece you added was only a snippet) and also needing to know how it looks.
If you could get it into a jsFiddle then i could try fix it up but its best to learn yourself where your going wrong and then how to fix it yourself.
Hope this all makes sense to you.
Your elements are most likely wired up with a mouse over effect that changes the border around each element. Hovering over the element will change the dimensions of the element. Since they are all floated they will move around as best they could to accommodate the altered element.
Refer to this page for example: http://blog.froy.com/bond-street-loft-by-axis-mundi/
Hovering over any of the Pin It buttons, whether an image or in the bottom of the post, causes the button to 'scroll/flip' instead of showing a static Pin It button image.
I can't even identify what the cause is... Does anyone have any experience with this? This occurs in Chrome and Firefox. Site is running off of Wordpress.
It looks like that's just the way the button was setup. If you go to this site, you'll see that's where the button is hosted. You'll notice it looks like three different buttons. That means it's a sprite and on certain activities by the mouse, it's showing a different part of the image. Just by taking a quick look I found this
media="all"
a, button, input:focus, input[type="button"], input[type="reset"], input[type="submit"], textarea {
-webkit-transition: all 0.1s ease-in-out;
-moz-transition: all 0.1s ease-in-out;
-ms-transition: all 0.1s ease-in-out;
-o-transition: all 0.1s ease-in-out;
transition: all 0.1s ease-in-out;
}
You'll notice in that code there are the transitions, that's part of what's making the effect happen. Also this is part of the code that is showing only a certain image, notice that background-position.
a.PIN_1392869101137_pin_it_button_20 {
background-repeat: none!important;
background-size: 40px 60px!important;
height: 20px!important;
margin: 0!important;
padding: 0!important;
vertical-align: baseline!important;
text-decoration: none!important;
width: 40px!important;
background-position: 0 -20px;
}
Now on the :hover notice where the background position is.
a.PIN_1392869101137_pin_it_button_20:hover {
background-position: 0 0px;
}
That change is what is causing the effect.
for example i have few webpage
how can i click the link in 1.html to 2.html
then 1.html slides to left and 2.html loada and slide from right?
just like this effect:
https://delicious.com/join
and the github project as well
https://github.com/CyanogenMod/android_packages_apps_Settings
there have no browser refresh blink
and the URL also changed.
is it using jquery?
I must use mvc php framework or rails to build the site?
how can I create some webpage like this?
any open source project or example code for that?
If what your asking is how to do the animation, then JQuery was the one responsible for it.
You can check this link for reference :
Downloads
Demo
Or you could try another search in the internet , just type "Fancy Sliding Forms"
Actually it all depends on you web designer/developer on how to implement that Jquery. Just read the docs.
God Speed!
Recently the challenge for me was to develop lightweight web applications, so I resorted to using minimal of jQuery because when viewed in mobile, the smooth behaviour was not guaranteed. So I chose hardware accelerated css transitions.
You can place the contents of web pages in two divs and dynamically add and remove classes to see this effect.
/* CSS */
.page-one {
width: 100%;
-webkit-transform : translateX(0px);
height:100%;
position: fixed;
background-color: #fff;
color : #6B6B77;
box-shadow: -3px 3px 3px #ddd;
overflow: auto;
}
.page-one.invisible {
-webkit-transform: translateX(-100%);
}
.page-one,
body {
-webkit-transition: all 0.3s ease;
-moz-transition: all 0.3s ease;
transition: all 0.3s ease;
}
.page-two {
-webkit-transform: translateX(100%);
}
.page-two.visible {
-webkit-transform: translateX(0px);
}
.page-two,
body {
-webkit-transition: all 0.3s ease;
-moz-transition: all 0.3s ease;
transition: all 0.3s ease;
}