How to fade in a div on hover? - javascript

I want to hover on an image, and have a div with text in it to fade in. Simple.
Sidenote: I want it to be style-able by CSS. (Kind of a given.) Also, I tried using some examples but I am in a hurry so please and thankyou.

If your using jQuery, Something like:
$('element').hover(function()
{
$('div').animate({ 'opacity': 1 });
});

Try this:
<div class="hover">
<img src="http://www.google.com/intl/en_ALL/images/srpr/logo1w.png" alt="google" />
</div>
<div class="fade" style="display:none">
This text will Fade In and Out.
</div>​
$(document).ready(function()
{
$("div.hover").hover(
function () {
$("div.fade").fadeIn('slow');
},
function () {
$("div.fade").fadeOut('slow');
}
);
});​
Sample code here
By the way, how do you want it to be CSS stylable?

Try this:
http://jsfiddle.net/2WYtS/

You can also use the fadeIn() and fadeOut() methods.
Link

Using CSS You can change fade out using opacity
try This
.box{
width: 180px;
text-align: center;
background-color: #fff;
padding: 5px 10px;
z-index: 10;
font-weight: bold;
color:#000;
}
.box:hover{
opacity: 0.7;
}

Related

JavaScript - Add img with data-pic

I'm trying to add an image in a span with data-pic, but now I want to try a picture carousel, how can I use JavaScript to index data-pic to achieve the effect?
I follow this instruction:
W3C
$(".product-colors span").click(function () {
$(".product-colors span").removeClass("active");
$(this).addClass("active");
$("body").css("background", $(this).attr("data-color"));
$(".product-price").css("color", $(this).attr("data-color"));
$(".product-button").css("color", $(this).attr("data-color"));
$(".product-pic").css("background-image", $(this).attr("data-pic"));
});
.product-colors span {
width: 14px;
height: 14px;
margin: 0 10px;
border-radius: 50%;
cursor: pointer;
position: relative;
}
.blue {
background: #7ed6df;
}
.green {
background: #badc58;
}
.yellow {
background: #f9ca24;
}
.rose {
background: #ff7979;
}
.product-colors .active:after {
content: "";
width: 22px;
height: 22px;
border: 2px solid #8888;
position: absolute;
border-radius: 50%;
box-sizing: border-box;
left: -4px;
top: -4px;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.4.1/jquery.min.js" charset="utf-8"></script>
<body>
<div class="product-card">
<h1>A new model of free group travel</h1>
<p>Travel destination</p>
<div class="product-pic"></div>
<div class="product-colors" id="Banner">
<span class="blue active" data-color="#7ed6df" data-pic="url(1.jpg)"></span>
<span class="green" data-color="#badc58" data-pic="url(2.jpg)"></span>
<span class="yellow" data-color="#f9ca24" data-pic="url(3.jpg)"></span>
<span class="rose" data-color="#ff7979" data-pic="url(4.jpg)"></span>
</div>
<div class="product-info">
<div class="product-price">$90</div>
Add to Cart
</div>
</div>
</body>
I am learning the basics of JavaScript, I don’t know how to implement this feature.
Hope you can help me
Thanks for your help :)
you can't use background and background-image together, one will overwrite the other,
By the way ,what are you trying to create? a carousel or what?
well, I guess this is what you're trying to do,
in order to achieve this, you need to declare the $('body') twice, add background-color to the first, then background-image to the second or (vice-versa),
below is the final code
var span = $('.product-colors span');
span.on('click', function() {
span.removeClass('active');
$(this).addClass('active');
$('body').css("background-color", $(this).attr('data-color'));
$('body').css('background-image', $(this).attr('data-pic'));
});
then go the css, I added background-blend property to it, so as to blend the background-color and background-image together, I also set the span to display: inline-block
check out this codepen link to see all the changes made here

jQuery fadeOut not working on click when already

I have an HTML container message that fades in, lasts 30 seconds and fades out. I want to have a "close" feature on it, and would like the click event to fade out to hide the container. But it doesn't work with the prior fadeOut in place.
(function() {
$('.container')
.delay(1000).fadeIn(500)
.delay(30000).fadeOut(500);
$('button').click(function() {
$('.container').fadeOut(500);
});
}());
.container {
background-color: #ccc;
display: none;
padding: 1rem;
width: 100px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="container">
Hello world
</div>
<button>Close</button>
I could call hide(), but I want the smooth transition that fadeOut provides. I just can't figure out why this won't work. Any ideas? Thanks!
Use setTimeout to queue up the 30-second fadeOut instead:
const container = $('.container');
container
.delay(1000)
.fadeIn(500);
setTimeout(() => container.fadeOut(500), 31000);
$('button').click(function() {
container.fadeOut(500);
});
.container {
background-color: #ccc;
display: none;
padding: 1rem;
width: 100px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="container">
Hello world
</div>
<button>Close</button>

How to make toggle off when on mouse over is done?

I have created an element that is displayed when I am over a particular box.
If I move my mouse over the box I can see my element but then I need to move my mouse in and out twice for the element to disappear. How can I fix it? Shouldn't the element hide itself once I move the mouse out?
How do I make my box only show when mouse is over the box?
<script>
$("#box").on("mouseover",function()
{
$("#my-box").toggle();
});
</script>
I tried to hide it myself, but it didn't work:
$("#box").on("onmouseout", function()
{
$("#my-box").hide();
});
You can use mouseover and mouseout in a same eventlistener like one below:
$("#box").on("mouseover mouseout",function()
{
$("#my-box").toggle();
});
#my-box{
display:none;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="box">
Box here
</div>
<div id="my-box">
My Box
</div>
FIDDLE DEMO
The problem with your code is you're using onmouseout instead of use mouseenter and mouseleave method.
You can use hover:
$('#box').hover(function(){
$('#my-box').toggle();
});
You can use combination of both
$("#box").mouseover(function() {
$("#my-box").show();
}).mouseout(function() {
$("#my-box").hide();
});
Example
jQuery Solution
HTML
<div class="box" id="action"></div>
<div class="box" id="hidden"></div>
JS
$("#action").on("mouseover mouseout",function()
{
$("#hidden").toggle();
});
CSS
.box{
width: 30px;
height: 30px;
background: red;
margin: 10px;
}
#hidden{
display: none;
}
JSFiddle
Allthough it would be better doing this by just using CSS.
CSS Only Solution
.box{
width: 30px;
height: 30px;
background: red;
margin: 10px;
}
#action:hover + #hidden{
display: block;
}
#hidden{
display: none;
}
JSFiddle

Changing image within div when clicked

Spent a couple of days on this now and need some guidance. I have a toggle with an image within the div. Basically when the div is clicked the image within it should change to a different image.
Here is a link to the jsfiddle, so you can see the image at the top which should change once the whole toggle area is clicked.
http://jsfiddle.net/VLe8g/
Also here is the code
HTML
<div class="toggle-wrap">
<div class="trigger">
<div class="one-third"><img src="http://placehold.it/200x200" /></div>
<div class="two-thirds column-last">This is where the heading goes <br />
This is where the description goes<br />
Toggle Open</div>
</div>
<div class="toggle-container">
<div class="one-third">First column This is where the heading goes This is where the heading goes</div>
<div class="one-third">Second column This is where the heading goes This is where the heading goes</div>
<div class="one-third column-last">Third column This is where the heading goes This is where the heading goes</div>
</div>
</div>
CSS
.toggle-wrap {
float: left;
width: 100%;
margin-bottom: 5px;
}
.trigger {}
.trigger a {
display: block;
padding: 10px;
padding-left: 15px;
text-decoration: none;
font-weight: bold;
color: #1D1D1B;
-webkit-transition-duration: 0s;
-moz-transition-duration: 0s;
-o-transition-duration: 0s;
background: url(tobeadded) no-repeat right 15px #F3F3F3;
}
.trigger.active a {
background: url(tobeadded) no-repeat right -20px #F3F3F3;
}
.toggle-container {
overflow: hidden;
float: left;
padding: 15px 15px 0 15px;
}
.one-third, .two-thirds {
display: inline;
float: left;
margin-right: 4%;
}
.one-third {
width: 30.66%;
}
.two-thirds {
width: 64%;
}
JAVASCRIPT
$(".toggle-container").hide();
$(".trigger").toggle(function(){
$(this).addClass("active");
}, function () {
$(this).removeClass("active");
});
$(".trigger").click(function(){
$(this).next(".toggle-container").slideToggle();
});
Hope you guys can help me out.
Thanks.
Demo here
Try this:
$(".toggle-container").hide();
$(".trigger").toggle(function () {
$(this).addClass("active");
$(".trigger").find('img').prop('src', 'http://jsfiddle.net/favicon.png');
}, function () {
$(this).removeClass("active");
$(".trigger").find('img').prop('src', 'http://placehold.it/200x200');
});
$(".trigger").click(function () {
$(this).next(".toggle-container").slideToggle();
});
$(this).find("img").attr("src", "http://placehold.it/400x400");
will change the image from a 200x200 to a 400x400. You can add a class to both of them (i.e. class=small, class=big) which jQuery can use to identify which one is currently being displayed and toggle between them.
assign an id to image tag like i did
<img id="test" src="http://placehold.it/200x200" />
and use the following code:
$(".toggle-container").hide();
$(".trigger").toggle(function(){
$(this).addClass("active");
$('#test').attr('src','http://placehold.it/200x200');
}, function () {
$(this).removeClass("active");
$('#test').attr('src','https://fbcdn-dragon-a.akamaihd.net/hphotos-ak-ash3/s200x200/851558_201013993381868_2094147002_n.png');
});
$(".trigger").click(function(){
$(this).next(".toggle-container").slideToggle();
});
Add the id attribute to your img, and then change the src attribute every time the toggle handler is executed.
The img definition should something like this:
<img id="myImage" src="http://placehold.it/200x200" />
and your toggle handler should look like this:
$(".trigger").toggle(function(){
$(this).addClass("active");
$("#myImage").attr('src', 'http://placehold.it/some_other_image');
}, function () {
$(this).removeClass("active");
$("#myImage").attr('src', 'http://placehold.it/200x200');
});

Image overlay is flickering?

**** The truth is all these solutions work, just not with the project so I will re-pose the question, slightly differently ****
Essentially I have an image, which when someone moves their mouse cursor over it, it displays a div (which contains an image - aka play button). When they move they're cursor outside of the image, the play button disappears.
It works but if you move the curse over the play button it flickrs like mad, hence I must have my events mixed up somehow..
Thanks in advance for any help...
HTML
<div id="cont">
<div id="art" style= "position: absolute; left: 20px; top: 40px;">
<img src="http://www.newmusicproducer.com/img/ic_play.png">
</div>
<img src="https://i1.sndcdn.com/avatars-000008744854-5sr588-large.jpg?d408275" alt="smile" id="imgSmile"></img>
jQuery
$(document).ready(function() {
$('#art').hide();
$('#imgSmile').mouseenter(function() {
$('#art').show();
});
$('#imgSmile').mouseleave(function() {
$('#art').hide();
});
});​
Here's a fiddle
This same effect could be achieved using just CSS:
<div>
<img src="http://www.newmusicproducer.com/img/ic_play.png">
</div>
div
{
background-image:url('https://i1.sndcdn.com/avatars-000008744854-5sr588-large.jpg?d408275');
width:100px;
height:100px;
position:relative;
}
div a
{
position:absolute;
top:20px;
left:30px;
display:none;
}
div:hover a
{
display:block;
}
​-- SEE DEMO --
EDIT: In case you need to use this multiple times on the same page with different link URLs, I've made a version which requires minimal HTML using a bit of jQuery to apply the rest:
<div class="play kirkbridge" data-playUrl="/myPlayUrl"></div>
http://jsfiddle.net/tW68d/16/
This might be a bit overkill though, it depends on your usage.
The problem is mousing over the new image is causing mouseout on the original. Try using hover() instead, along with both elements as the selector.
$(document).ready(function() {
$('#art').hide();
$('#imgSmile, #art').hover(
function() {
$('#art').show();
}, function() {
$('#art').hide();
}
);
});
Updated fiddle
Here's an alternative approach:
http://jsfiddle.net/aramk/ZqVZ6/1/
$(document).ready(function(){
var art = $('#art');
art.hide();
var updatePlayButton = function() {
if (art.is(':visible')) {
art.hide();
} else {
art.show();
}
}
$('#cont').hover(updatePlayButton);
});​
I'd use a wrapping DIV, since when the button overlaps the smile image and your mouse is over it you lose focus from the smile image and it starts flashing. This will avoid that.
can be done using CSS too, if thats a posibility.
here is the fiddle http://jsfiddle.net/xasy4/
<div id="imgSmile">
<div id="art">
<a href="#"><img src="http://www.newmusicproducer.com/img/ic_play.png">
</a>
</div>
</div>
the css
#imgSmile
{
background: url('https://i1.sndcdn.com/avatars-000008744854-5sr588-large.jpg?d408275') no-repeat center Transparent;
width: 100px;
height: 100px;
}
#imgSmile > #art
{
position: absolute; left: 20px; top: 40px; opacity: 0;
}
#imgSmile:hover > #art
{
position: absolute; left: 20px; top: 40px; opacity: 1;
}
You can use the .on() method, than set both element as selectors and use an event (e) checker like:
demo jsBin
$(document).ready(function(){
$('#art').hide();
$('#imgSmile, #art').on('mouseenter mouseleave',function(e){
if(e.type === 'mouseenter'){
$('#art').show();
}else{
$('#art').hide();
}
});
});
What I like the most is the use of the Ternary operator like:
$('#imgSmile, #art').on('mouseenter mouseleave',function(e){
var et = e.type === 'mouseenter' ? $('#art').show() : $('#art').hide();
});
Demo with ternaly operator
You can use in your exact case just the .toggle() method:
$('#imgSmile, #art').on('mouseenter mouseleave',function(e){
$('#art').toggle();
});
demo with .toggle()
http://jsfiddle.net/jqkBx/1/
Why dont you just use CSS for hover effects?
HTML
<div id="wrapper">
<img src="https://i1.sndcdn.com/avatars-000008744854-5sr588-large.jpg?d408275" alt="smile" id="imgSmile" />
<div id="art" style="position: absolute; left: 20px; top: 40px;">
<img src="http://www.newmusicproducer.com/img/ic_play.png" />
</div>
</div>
CSS
#art{
display:none;
}
#wrapper{
width:100px;
height:100px;
}
#wrapper:hover #art{
display:block;
}
​
$(document).ready(function() {
$('#art').hide();
$('#imgSmile').mouseenter(function() {
$('#art').show();
});
$('#art').mouseenter(function() {
$('#art').show();
});
$('#imgSmile').mouseleave(function() {
$('#art').hide();
});
});​
just add #art mouse enter event

Categories

Resources