How can I get same effect like this
http://bavotasan.com/demos/fadehover/
But only for anchor tags not for images, let say I have anchor background blue and I want it to change to red but with this effect, how can I do that? thank you
Use hover and animate. Note that this requires the jQuery color animations plugin.
<html>
<head>
<title>color change</title>
<script type="text/javascript" src="http://code.jquery.com/jquery.js"></script>
<script src="http://plugins.jquery.com/files/jquery.color.js.txt" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript" charset="utf-8">
$(function() {
$('a').hover(function() {
$(this).animate({
color: "#f00"
}, "fast")
}, function() {
$(this).animate({
color: "#00f"
}, "fast")
});
});
</script>
<style>
a { color: #00f; }
</style>
</head>
<body>
This changes color on hover.
</body>
</html>
In the example of changing color on an a element there is no reason to use the crossfade effect used in the link you provide.
Placing two images on top of eachother (via CSS: position and z-index). A black and white one, and a color one:
/* Assumes width and height are the same between all three elements */
.viewBox { position:relative; width:125px; height:125px; display:block; }
img.color { position:absolute; top:0; left:0; z-index:10; }
img.bandw { position:absolute; top:0; left:0; }
<a class="viewBox" href="http://google.com">
<img src="color.jpg" class="color" />
<img src="bandw.jpg" class="bandw" />
</a>
$(".viewBox").hover(
function() {
$("img.color").fadeIn();
},
function() {
$("img.color").fadeOut();
}
);
--
Alternatively, you can accomplish this without jQuery, using pure css too:
span.hov span { display:none; }
.rollover { display:block; background-image:url('bandw.jpg');
width:125px; height:125px; }
.rollover span.hov { display:none; background-image:url('color.jpg');
width:125px; height:125px; }
.rollover:hover span.hov { display:block; }
<a class="rollover">
<span class="hov">
<span>Invisible Link Text</span>
</span>
</a>
The HTML, CSS and jQuery is available on the web page for you.
Here, the creator has layed 2 images on top of each other then uses jQuery to change the opacity.
<div class="fadehover">
<img class="a" alt="" src="cbavota-bw.jpg" style="opacity: 1;"/>
<img class="b" alt="" src="cbavota.jpg"/>
</div>
$(document).ready(function(){
$(".a").hover(function() {
$(this).animate({"opacity": "0"}, "slow");
},
function() {
$(this).animate({"opacity": "1"}, "slow");
});
});
Related
My goal is to to create an animation (css / jquery), so green box slides (grows) over red one (red one is fixed).
Then toggle it back : green shrinks and red comes back again.
Using ("#green").css("wdith") makes the red one being pushed and I want to avoid that.
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<script type="text/javascript" src="js/jquery-1.11.1.min.js"></script>
</head>
<body>
<style>
.green {
width:400px;
background-color:green;
display:inline-block;
height:320px;
}
.red{
width:200px;
background-color:red;
display:inline-block;
height:320px;
}
</style>
<div>
<div id="green" class="green">eezez</div>
<div id="red" class="red">eezez</div>
<script>
$(function() {
$("#action").click(function() {
// toggle so green grows and takes red place (red does not move)
// toggle so green shrinks and so red takes his initial place again
});
});
</script>
</div>
</body>
</html>
here is the fiddle:
http://jsfiddle.net/Sj575/
I'd use a float instead. Try this:
jsFiddle example
.green {
width:400px;
background-color:green;
height:320px;
float:left;
}
.red {
background-color:red;
height:320px;
}
#container {
width:600px;
overflow:hidden;
}
<div id="container">
<div id="green" class="green">eezez</div>
<div id="red" class="red">eezez</div>
</div>
<button id="action">Toggle Green !</button>
Add
$('#green').slideToggle("fast");
then add css property
.green {
width:400px;
background-color:green;
display:inline-block;
position:absolute;
height:320px;
}
JSFIDDLE
Here's what I did:
Like j08691 I also added float:left to both divs and I added display:block and clear both to the button, otherwise it would too be on the left
<body>
<style>
.green {
width:400px;
background-color:green;
float: left;
height:320px;
}
.red{
width:200px;
background-color:red;
float: left;
height:320px;
}
#action{
display: block;
clear:both;
margin-top:2em;
}
</style>
<div>
<div id="green" class="green">eezez</div>
<div id="red" class="red">eezez</div>
</div>
<button id="action" >Toggle Green !</button>
Now what I did was make 2 different functions,to make sure the button wouldn't invoke both events I used the preventDefault(); method. I used animate to increase width and decrease the red using hide() to make it disappear, once you click on 'action' the green will disappear and the red div will take its place
<script>
$(document).ready(function() {
$("#action").one('click', toggleGreen);
// toggle so green grows and takes red place (red does not move)
function toggleGreen(){
$("#green").animate({
width:'600px'
});
$("#red").animate({
width:'100px'
}).hide(2000);
preventDefault();
}
$("#action").on('click', function(){
// toggle so green shrinks and so red takes his initial place again
$("#green").hide(2000);
$("#red").animate({
width:'600px'
}).show(3000);
})
});
</script>
Hope that helps!
I have a simple script: http://jsfiddle.net/PA9Sf/
I want when I hover a particular button, the size is enlarged and the button stand out on the top of other buttons, instead of affecting the position of other buttons as currently in the jsfiddle above.
<img src='http://cdn.mxpnl.com/site_media/images/partner/badge_light.png' />
<img src='http://cdn.mxpnl.com/site_media/images/partner/badge_light.png' />
<img src='http://cdn.mxpnl.com/site_media/images/partner/badge_light.png' />
<script>
jQuery('img').hover(function() {
$(this).attr('width', '200px');
}, function() {
$(this).attr('width', '100px');
});
</script>
First of all i would highly recommend you to use pure CSS for this.
Second, I think you can achieve this with a transform scale:
img:hover
{
transform: scale(1.5, 1.5);
-ms-transform: scale(1.5, 1.5)); /* IE 9 */
-webkit-transform: scale(1.5, 1.5);
}
You can play around with the ratio yourself. Note that i added a marign so the images don't go off-screen
jsFiddle
Changed your code.Try this Fiddle
CSS:
.img{
float:left;
margin:0px 10px;
position: fixed;
top:10px;
}
.img1{
left:0px;
z-index:3;
}
.img2{
left:120px;
z-index:2;
}
.img3{
left:240px;
z-index:1;
}
On hover I gave a try with css position as fixed, please try this new jsfillde - http://jsfiddle.net/c3hwf/
CSS Code
img{
width: 100px;
}
img:hover{
width:200px;
position: fixed
}
HTML Code
<p>This is just a test</p>
<img src='http://cdn.mxpnl.com/site_media/images/partner/badge_light.png' />
<img src='http://cdn.mxpnl.com/site_media/images/partner/badge_light.png' />
<img src='http://cdn.mxpnl.com/site_media/images/partner/badge_light.png' />
Collection of Creative button Hover and Click Effects
width CSS2 :
DEMO
div{width:100px; float:left;border:1px solid #fff; margin-right:5px}
div img{width:100%;}
jQuery('img').hover(function() {
$(this).css({width : '200px', position:'absolute'});
}, function() {
$(this).css({width: '100px', position:'static'});
});
Hi,
I want to make a hyperlink that expands from the top down when clicked and closes when clicked again. I also want a fade effect applied to the link text.
I tried something like this :
HTML
<div id="lime">
hi
<p id="red">How are you doing?</p>
</div>
CSS
#lime
{
background-color:#deff00;
text-align:center;
}
#lime:hover{
height:300px;
transition:height 1s;
}
#lime:hover p{
opacity:1;
transition:opacity 1s;
}
#red {
opacity:0;
color:#ff0000;
}
CSS Demo
But the effect takes place on hovering over the link. What I'd like is for the link to expand from the top down when clicked.
I also tried this but I don't know anything about javascript.
HTML
<div>hi</div>
CSS
div{
background-color:#deff00;
text-align:center;
}
#expand {
height:300px;
transition:height 1s;
}
#contract {
background-color:#deff00;
transition:height 1s;
}
Javascript
$('#btn').click(function(e){
$('#expand') function(){
$('#contract').transition('height 1s');
});
};
Javascript Demo
You need to create two style class - one will expand your div to the desired height, and another will collapse it to the initial position. Code sample follows -
HTML
<div id="lime">hi</div>
CSS
div{
background-color:#deff00;
text-align:center;
height: 20px;
}
#contract {
background-color:#deff00;
transition:height 1s;
}
.expand {
height:300px;
transition:height 1s;
}
.collapse {
height: 20px;
transition:height 1s;
}
JavaScript
$(document).ready(function () {
$('#btn').click(function (e) {
if ($("#lime").hasClass("expand")) {
$("#lime").removeClass('expand').addClass('collapse');
}
else {
$("#lime").removeClass('collapse').addClass('expand');
}
});
});
DEMO.
You can easily to this using j Query.
Example shown below:
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>slideDown demo</title>
<style>
#lime
{
background-color:#deff00;
text-align:center;
}
.para {
color:red;
}
</style>
<script src="http://code.jquery.com/jquery-1.9.1.js"></script>
</head>
<body>
<div id="lime">
hi
<p id="red" class="para">How are you doing?</p>
</div>
<script>
$( "#click" ).click(function() {
$( "#red" ).slideToggle( "slow" );
});
</script></body>
</html>
You can refer this link http://api.jquery.com/slideToggle/
I am totally agree with Sayem Ahmed's answer...
Here some additional answer
Option 1. If you are using jQuery at that time you can use toggle also for achieving this scenario.
Here is
DEMO
Option 2. You can use pure javascript code for making it done.
Here is
DEMO
Hope this will be helpful !!
Ok so I wanted to practice some jQuery and to do it I thought I would make the animation that Jay-Z uses on his new album commercials, he has a bar over his name and it slides left while also disappearing. On top of that I wanted the text to fadeOut, fadeIn, and then fadeOut again to give it a flashing effect before it disappeared. Can someone help me with this :l, I got the layout done but the jQuery just wont work..
<!DOCTYPE html>
<html lang="en">
<head>
<title>Magna Carta</title>
<script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jqueryui/1.10.3/jquery-ui.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$('#bar').delay(800).css('padding-left', 0+'px');
$('#main p').fadeOut('slow' function(){
$('#main p').fadeIn('slow' function(){
$('#main p').fadeOut('slow');
});
});
});
</script>
<style type="text/css">
body {
background-color:#f2f2f2;
margin:0px;
padding:0px;
}
#main {
width:300px;
height:200px;
position:absolute;
left:50%;
top:50%;
margin:-150px 0 0 -150px;
text-align:center;
}
#main p {
font-family:Admisi Display SSi;
font-size:64px;
}
#bar {
padding-left:180px;
height:25px;
background-color:black;
position:absolute;
z-index:2;
margin-top:87px;
margin-left:61px;
}
</style>
</head>
<body>
<div id="main">
<center>
<div id="bar"></div>
</center>
<p>JAY-Z</p>
</div>
</body>
</html>
You need to use the animate function here (before you were just setting the padding-left to 0, which happens immediately) and you have to fix your fadeOut and fadeIn callback functions:
$(document).ready(function () {
$('#bar').delay(800).animate({
'padding-left':0
}, 1000, function () {
// Animation complete.
$('#bar').delay(800).css('padding-left', 0 + 'px');
$('#main p').fadeOut('slow', function () {
$('#main p').fadeIn('slow', function () {
$('#main p').fadeOut('slow');
});
});
});
});
Demo: http://jsfiddle.net/BjBry/1/
I'm trying to make an image appear when you roll over text on the bottom right side of the screen. How do I get it down there for all screen widths and heights?
you can use fixed positioning on the image and assign the left,top, right or bottom attributes to suit your needs see: http://www.w3schools.com/css/css_positioning.asp for an example
This'll work:
<style type="text/css">
img.floating {
position: absolute;
bottom: 0px;
left: 0px;
}
</style>
<img class="floating" src="url to image" />
:hover doesn't work for IE6 unless it's being used on a link. Use this.
<style type="text/css">
#myFavoriteFooterImage {
bottom:0px;
right:0px;
position:fixed;
display:none;
}
</style>
<script type="javascript">
document.getElementById("mousyTextFunTime").onmouseover = function(){
document.getElementById("myFavoriteFooterImage").style.display = "";
};
document.getElementById("mousyTextFunTime").onmouseout = function(){
document.getElementById("myFavoriteFooterImage").style.display = "none";
};
</script>
<div id="mousyTextFunTime">Text to mouse over</div>
<img id="myFavoriteFooterImage" />
Create a CSS style for :hover on the text.
<style type="text/css">
#bottom { display:none; }
#text:hover #bottom {
display:block;
position:absolute;
left:0; // how far from the left
bottom:0;
}
</style>
<div id="text>TEXT</div>
<img src="bottomimage.jpg" id="bottom">