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.
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 am trying to use the .show("blind", "slow") Jquery-ui Effects and the .hide("blind", "slow") with .hover(). I would like to .hover() on the button and show the div, then by leaving the button I would .hide("blind", "slow"). The problem is if I leave to quickly and the div is not completely shown, then I will not go back to show to his full height once hovering back again.
This is my code and I include the js fiddle
HTML Code
<div id="state-slider">
My Slider
</div>
<button id="trigger">
Button
</button>
CSS Code
#state-slider {
position: fixed;
top: 50px;
left: -270px;
width: 500px;
min-height: 100px;
background-color: #ff9000;
}
Jquery
$(function() {
$("#trigger").hover(function() {
$("#state-slider").dequeue().stop().show("blind", "slow");
}, function() {
$('#state-slider').dequeue().stop().hide("blind", "slow");
});
});
Thanks a lot
Fabrizio
edit:
$(function() {
$("#trigger").hover(function() {
$("#state-slider").dequeue().stop(false, true).show("blind", "slow");
}, function() {
$('#state-slider').dequeue().stop(false, true).hide("blind", "slow");
});
try it this way, so it jumps to the end of any animation if you quickly hover over and back again
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 know how to stack divs on top of divs by doing position:absolute for the parent and position:relative for the children, but how can I make a div "rise up" from another div? An example of what I want to achieve is here. Scroll to the bottom and hover your mouse over the artwork.
What you can do is absolute position that pop-up in a relative positioned box, for example:
<div class="featured-image">
<div class="caption">
<p>This is where your text goes</p>
</div>
</div>
Now that you have that, you'll want to make the caption invisible unless scrolled over. So, a simple way to do this with just CSS is:
.featured-image { position:relative; width:300px; height: 400px; }
.caption { position:absolute; bottom:0; display:none; }
.feature-image:hover > .caption { display:block; }
The last line makes it seen when you mouse-over the image.
Then you could animate it with jQuery easily. That appears to be what they're using.
$(document).ready(function(e) {
$(".caption").hide();
});
var show = function() {
$(".caption", this).stop(true, true).show(500)
};
var hide = function() {
$(".caption", this).stop(true, true).hide(500);
};
$(".featured-image").hover(show, hide);
HTMl
<div id="pic">
<div>
</div>
</div>
CSS
#pic {
position: relative;
background: yellow;
width: 100px;
height: 100px;
overflow: hidden;
}
#pic div {
position: absolute;
bottom: -50px;
background: black;
height: 50px;
width: 100px;
}
JQuery
$('#pic').hover(
function(){
$(this).find('div').stop(true, true).animate({
'bottom': '+=50'
}, 100);
},
function(){
$(this).find('div').stop(true, true).animate({
'bottom': '-=50'
}, 100);
}
);
jsfiddle: http://jsfiddle.net/Z6eLa/2/
Introduce yourself to jQuery and z-index.
http://api.jquery.com/slideDown/
The trick here is slidedown will make your top div slide down. The only thing that comes to my mind, is instead of expanding that bottom div up, do the opposite. Get the top div, and have it slide-up, while the other div is displayed behind it. It should give the appearance of the bottom div 'sliding-up'.
Note, sorry if this doesn't work. I'm actually not sure if you can get it to slide only halfway up instead of all the way...good luck though!
You don't need JS for that, just use css3 transitions.
Is there any plugin available for jquery to animate the scroll? Say I have few scrollbars in the window. I want that whenever user is scrolling the scrollbar should animate and not appear instantaneously.
To get an exact idea of what I am trying to achieve, see this:
http://demo.xceed.com/DataGrid_Silverlight/Demo_1.3/
This is in Silverlight.
See how it scrolls in fluid manner. I want to achieve the same effect but using jquery. Is this possible?
Thanks.
Use jQuery UI: http://jqueryui.com/demos/slider/#default.
Insert code into the ready handler as shown here:
var width = $('#scrollable').width() - $('#wrapper').width();
$('#slider')
.slider( { max: width })
.bind('slide', function(event, ui) {
$('#scrollable').stop().animate(
{
right: ui.value
},
1000
);
});
HTML:
<div id="wrapper">
<div id="scrollable"><!-- bla bla --></div>
<div id="slider"></div>
</div>
Don't forget to hide the scrollbar:
#wrapper {
text-align: left;
width: 900px;
height: 600px;
margin: 0 auto;
border: 1px solid black;
overflow: hidden;
position: relative;
}
Some thing like this might help.
$("html, body").animate({
scrollTop: 0
}, "slow");
You could make your own custom "sliders" using jQuery UI, and then upon change, do what "userD" suggested. One slider would be horizontal, one vertical (of course).
Then you'd want to hide the browsers actual scroll bars for the particular div by using css ("overflow: hidden;")
Here's was #userD suggested....
$("html, body").animate({
scrollTop: 0
}, "slow");
You would of course change that to "#myDiv" instead of "html, body".
A nice light plugin jQuery .scrollTo. Found here: Arial Fiesler Blog
sytanx is easy $('div').scrollTo(#anchorindiv,{duration:1000});