Most of you must have played the game Angry Birds . In it , on the start screen , we are shown the play button . On hovering over it , the button increases in size. I tried to replicate something similar and came up with this(Launch in new window). Now , my question is , which CSS-effect should I use to make it happen , since the effect I use is really bad.
My Javascript Code:
$(document).ready(function () {
$("#play_button").hover(
function () {
$('#play_button').css({ "height": "240px", "width": "250px" });
},
function () {
$('#play_button').css({ "height": "225px", "width": "220px" });
}
);
});
Thanks.
I don't know what the Angry Birds play button looks like, but you can make a button "grow" on hover using the hover pseudo class and transition
FIDDLE: http://jsfiddle.net/wuJD9/
#play {
width: 220px;
height: 225px;
background: tomato;
transition: .5s ease;
}
#play:hover {
width: 250px;
height: 240px;
}
for css
#play_button { height:225px; width:220px;}
for hover
#play_button:hover { height:225px; width:220px;}
Related
I have jquery to change the background image when hovering on the text. I want to add a fade in effect.
here is the code I have now:
$(document).ready(function(){
$("#anatomyNow").hover(function(){
$("#bg").css("background-image", "url(image/anatomyNow5.png)");
}, function(){
$("#bg").css("background-image", "url(image/anatomyNow5.png)");
});
});
I tried to add the code below but it doesn't work.
$(document).ready(function(){
$("#anatomyNow").hover(function(){
$("#bg").fadeIn();
});
});
Update:
Thank you all for answering.
The effect I want is something like this:
https://www.christinewalthall.com/work
When you hover over the text, the background image will change. I have managed to do that, but the image changed too fast. I hope to add the effect so the image does not change dramatically.
fadeIn animates the opacity of an element, so using it in this context wouldn't work.
There's probably more than one way to achieve what you want here, but the one that comes to mind is layering images/divs with background images on top of each other and using css opacity transition on hover.
I did a bit of googling for you and here's a resource that shows how to go about that:
http://css3.bradshawenterprises.com/cfimg/
If I don't misunderstood your requirements then this is something you want.
$(document).ready(function() {
$("#effect").hover(function() {
$(this).animate({
opacity: '1'
}, "slow");
}, function() {
$(this).animate({
opacity: '0.5'
}, "slow");
});
});
#effect {
padding: 0.4em;
background: #555 url("https://thumb9.shutterstock.com/display_pic_with_logo/77318/1007648908/stock-photo-sunrise-beam-in-the-beautiful-park-1007648908.jpg");
opacity: 0.5;
}
#effect {
max-width: 490px;
height: 320px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="effect" class="ui-widget-content ui-corner-all"></div>
I've been wrestling with this for way too long.
Problem: I'm trying to make the image slide off of screen when the button is pressed, which I have successfully done, but not adequately. There are two problems:
I don't want to hide overflow on the body to hide the horizontal scroll being triggered when the div moves off the screen.
When I click on the button for a second time, I want the div to slide in from the right back to the original position. I haven't been able to figure this one out. I know I can do it, but creating another css class, but I know there has to be an easier way.
JSFiddle
CSS:
#abs {
position: absolute;
height: 200px;
width: 200px;
background-color: grey;
left: 0;
top:0;
transition: transform 3s;
}
.open {
transform: translateX(1050px);
}
.hide {
display: none;
}
p {
text-align: center;
}
JS:
$('#clickMe').on('click', function(){
$('#abs').toggleClass('open');
if($("#abs").hasClass("open")) {
setTimeout(
function() {
$("#abs").hide();
},
2500);
} else {
$("#abs").show();
}
})
Hi Please refer to the fiddle.https://jsfiddle.net/cdx7zeo2/1/
I modified your code to use jQuery animate.
$('#clickMe').on('click', function(){
var right = parseInt($('#abs').css('left'));
console.log(right);
if(right === 0){
$( "#abs" ).animate({
left:'2500px'
}, 1500);
}else{
$( "#abs" ).animate({
left:'0px'
}, 1500);
}
})
Also modified the id test to have overflow-y hidden, so that you don't need to tough overflow property of body. Note, here we are not using open class anymore.
#test {
position: relative;
height: 500px;
width: 500px;
background-color: black;
overflow-y:hidden;
}
I'm trying to implement rating functionality on my website.
I have the following HTML:
<div class="rating-container">
<div class="stars">
</div>
</div>
The stars div gets populated with 10 fa fa-star font-awesome star icons during runtime via jQuery
My CSS looks like this:
div.rating-container div.stars {
display: block;
}
div.rating-container div.stars i {
font-size: 20px;
color: white;
cursor: pointer;
margin-right: 3px;
padding: 3px;
}
..And the final result looks like this:
What I want to do now is to only show 1 star instead of 10 when the page initially loads. Hovering over the 1 star should expand the stars div so that all 10 stars show and the user can rate - once the mouse leaves the stars div, it goes back to only showing one star. I'm trying to achieve this using jQuery's $(this).animate({ width: someWidthHere }); on the $(".stars").hover()function but I can't seem to get it right.
Any help/pointers would be greatly appreciated.
Thanks in advance!
Update: per request, here is the (silly) test code I've tried:
$(function () {
$(".stars").hover(
function () {
$(this).animate({ width: '100%' });
},
function () {
$(this).animate({ width: '10%' });
}
);
});
Which gives me this on hover:
Hopefully I understand your question correctly. You can get trigger an event for on and off like this:
$( ".stars" ).hover(
function() {
$( ".stars" ).animate({ width: "100px" },1000);
}, function() {
$( ".stars" ).animate({ width: "20px" },1000);
}
);
Just an FYI, I think it might be better to just use css transitions and just use the .toggleClass() to expand and contract the div. It works better with some mobile browsers that have less processing power but either way works.
This is how you would do that with css:
.stars {
width:20px;
-webkit-transition: width 1s; /* For Safari 3.1 to 6.0 */
transition: width 1s;
}
.stars:hover{
width:100px;
}
I'm not that good with jQuery animations, but i'm trying to animate an background image when mouse enters on its element. The animation is simple, mouse enters, the image moves a little to the left. Mouse leaves, image returns to its position.
I could have that working on Chrome, but with a different behaviour in IE. FF doesn't event move anything. My is the following:
$(".arrow").on("mouseenter", function()
{
$(this).stop(true).animate({ "background-position-x": "75%" });
}).on("mouseleave", function()
{
$(this).stop(true).animate({ "background-position-x": "50%" });
});
Where .arrow is a div with these properties:
.arrow {
width: 50px;
padding: 10px 0;
background: url(http://upload.wikimedia.org/wikipedia/commons/4/45/Right-facing-Arrow-icon.jpg) no-repeat center;
background-size: 16px
}
And here is a demo.
What is most strange for me is the case of IE. It seems that the animation start always from left to right, not middle right. It occours when mouses leaves too. Any ideas ?
Because Firefox doesn't support backgroundPositionX, but it does support background position
Try this code in firefox and InternetExplorer:
$(".arrow").on("mouseenter", function()
{
$(this).stop(true).animate({ "background-position": "75%" });
}).on("mouseleave", function()
{
$(this).stop(true).animate({ "background-position": "50%" });
});
More Info: backgroundPositionX not working on Firefox
Here is Updated Demo working well with FF and IE
I know Manwal has solved it , but it can also be done very easily in CSS3 like so:
.arrow {
float:left;
width: 50px;
padding: 10px 0;
background: url(http://upload.wikimedia.org/wikipedia/commons/4/45/Right-facing-Arrow-icon.jpg) no-repeat center;
background-size: 16px;
transition: all 2s ease-in-out;
}
.arrow:hover {
transform :translateX(50px);
}
where translate 50px will be the value you wish to move it along the X axis
So what I'm trying to do is getting a div with an animation to show up only when I hover a button. I want that div to be invisible until the page hovers it, and I want it to go back being invisible once the mouse is no longer hovering the button.
Also, I want to do this with JQuery since I've kept far away from it for too long.
JQuery Code:
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.min.js" type="text/javascript"></script>
<script type="text/javascript">
$(document).ready(function(){
$('#about').hover(function(){
$('#about_hover').stop(true, true).animate({
width: '150px',
opacity: '0.8',
}, 300);
}, function(){
$('#about_hover').animate({
width: '0px',
opacity: '0',
}, 300);
});
});
</script>
HTML Code:
<div id="about_hover">
<img src="images/hover.gif">
</div>
<img src="images/menu/about.png">
<br>
CSS:
#about_hover {
text-align: right;
width: 150px;
float: left;
margin: 5px 0px 0px 100px;
overflow: hidden;
}
I'm getting a few problems though. First of all, the image inside the div loads up with opacity at 100% and only goes to 80% after I hover it for the first time. After that, it fades away like it's supposed to but it doesn't show up again when I hover the button.
Any thoughts?
Thanks
Thanks!
How about using fadeTo or fadeToogle ?
Here's a small snippet made using fadeTo: http://jsbin.com/agojux ?
you can have a look at it's source here
Here is your code, but a little bit modified:
JS:
$('#about_hover').width(0);
$('#about').hover(function(){
$('#about_hover').stop(true, true).animate({
width: '150px',
opacity: '0.8',
}, 300);
}, function(){
$('#about_hover').animate({
width: '0px',
opacity: '0',
}, 300);
});
HTML:
<img src="http://www.placekitten.com/20/20/"><br>
<div id="about_hover"><img src="http://www.placekitten.com/80/80/"></div>
Honestly, it's probably best to use jQuery's on in this situation.. Your code would look something like this:
$("selector").on({
mouseenter: function () {
//fade in goes here
},
mouseleave: function () {
//fade out goes here
}
});
Hover is cool and all, but things can get messy with hover toggling. on makes this a snap. Also for your opacity's, I would probably use a fadeTo instead.
Here is the on documentation.