I have a div that is set to display:hidden. I want this div to be set to display:block when a certain element (#navbar li a) is hovered over. Here is my javascript.
$('document').ready(function(){
$("#navbar li a").onmouseover(function{
$("#navbar ul").css("display","block");
});
});
I know that $("#navbar li a") is targeting the proper element, as I have tested this. Is there anything wrong with my javascript code?
edit: this is a dropdown menu. #navbar ul is a nested list.
Use .hover
$('document').ready(function(){
$("#navbar li a").hover(function(){
$("#navbar ul").css("display","block");
});
});
If you would like a fade in effect then just use .fadeIn
DEMO
$(function() {
$('#div1').hover(function() {
$('#div2').fadeIn();
}, function() {
$('#div2').fadeOut();
});
});
For completeness here's a CSS only method:
(FYI this using this method won't fade it as per say, just make it appear on hover and then disappear when not on hover.)
DEMO
#div2 {
width: 200px;
height: 200px;
background: red;
display: none;
}
#div1:hover ~ #div2 {
display: block;
}
There is no "onmouseover"
The right syntaxsis is:
$("#navbar li a").on("mouseover", function(){
$("#navbar ul").show() //Can use just show here
})
all the answers are show / hide . your code too.
Question is about fade in.
use .fadeIn() .fadeOut instead show hide
http://api.jquery.com/fadeIn/
Yes, there is something wrong with your code, jQuery doesn't have a onmouseover event, and what you're probably looking for is the mouseenter event, as mouseover fires continously on mousemove:
$(document).ready(function(){
$("#navbar li a").on('mouseenter', function(){
$("#navbar ul").show();
});
});
on the other hand, you could probably do this with just CSS ?
If you want the div to actually fade from opaque to 100% then you have start with opaque at say 80% (shown as 0.8) then fade to 100% (shown as 1.0). Since you want to start with a level of opacity the div needs to be hidden using "display none", the opaque level can then be set without the effect being seen, then make it visible and fade to 100%:
$("div.mydivclass").on("mouseenter", function () {
$(this).css("display", "none");
$(this).fadeTo("fast", 0.8);
$(this).css("display", "");
$(this).fadeTo("10", 1.0);
});
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'm firing several effects when I hover over a div. The problem is that the div also has the pseudo element ::after, which populates the div with a virtual element (a play button) using the content CSS rule.
My hover effects work when I'm hovering any part of the div other than the space where the ::after element is.
Simply, I want to know if there is a way to point towards the ::after element using jQuery. I've tried to define the ::after element as a variable named "play", but have had no luck there either. This is my script:
var play = $('a.image-wrap::after');
$(".image-holder, .big-headline a, .small-headline a, play").on({mouseenter: function () {
$('.image-holder').css('background-color', color);
$('.image-holder img').css({
'mix-blend-mode': 'multiply',
opacity: .6
});
if ($(window).width() > 1115) {
$('.read').css('right', '35%');
} else {
$('.read').css('right', '0');
}
},
mouseleave: function () {
$('.image-holder').css('background-color', '');
$('.image-holder img').css({
'mix-blend-mode': '',
opacity: ''
});
$('.read').css('right', '');
}
});
What if you just add the new CSS to a style and then remove it when we're done hovering? It works pretty well:
$(".example").on("mouseenter", function () {
$("#workAround").html(".example:after {background:pink}");
}).on("mouseleave", function () {
$("#workAround").html("");
});
.example {
height:10px;
width:100px;
background:green;
margin:20px 0 20px 0;
}
.example:after {
content:'';
background:red;
height:10px;
width:100%;
display: block;
position:relative;
bottom:-10px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<style id="workAround"></style>
<div class="example"></div>
There are two divs; Div A (display:none by default) and Div B (visible all the time). How would one make it so if mouse moves over Div B, Div A becomes visible. Div A should remain visible if the mouse cursor is on either Div A or Div B, otherwise Div A should be hidden.
I'm using jQuery plugin hoverIntent for this.
$(".the-dropdown").hoverIntent( function(){
$(".the-dropdown").show();
}, function(){
$(".the-dropdown").hide();
});
$(".menu-item").hoverIntent( function(){
$(".the-dropdown").show();
}, function(){
$(".the-dropdown").hide();
});
jsfiddle
Hmm, try something like this.
HTML:
<div id="a"></div>
<div id="b"></div>
CSS:
div {
height: 200px;
width: 200px;
}
#a {
background: #0f0;
display: none;
}
#b {
background: #f0f;
}
JS:
$('#a, #b').hover(function() {
$('#a').show();
}, function() {
$('#a').hide();
});
Fiddle
Or in your specific case:
$(".the-dropdown, .menu-item").hover( function(){
$(".the-dropdown").show();
}, function(){
$(".the-dropdown").hide();
});
hoverIntent is a plug-in that attempts to determine the user's
intent... like a crystal ball, only with mouse movement! It is similar
to jQuery's hover method. However, instead of calling the handlerIn
function immediately, hoverIntent waits until the user's mouse slows
down enough before making the call.
Why? To delay or prevent the accidental firing of animations or ajax
calls. Simple timeouts work for small areas, but if your target area
is large it may execute regardless of intent. That's where hoverIntent
comes in...
If you would like to use the hoverIntent plugin you can download it here:
http://cherne.net/brian/resources/jquery.hoverIntent.html
Working Example Using hoverIntent
$(".menu-item").hoverIntent({
over: function () {
$(".the-dropdown").slideDown();
},
out: function () {
$(".the-dropdown").slideUp();
},
timeout: 500,
interval: 500
});
<div class="menu-item">Hover this for half a second
<div class="the-dropdown"></div>
</div>
div {
height: 200px;
width: 200px;
}
.the-dropdown {
background: red;
display: none;
position:relative;
top:182px;
}
.menu-item {
background: blue;
}
I'm using slideToggle to display a div when a navigation button is clicked. It's working, but the div that I'm displaying is pretty tall, so you don't actually see much of it once it loads. The div sits directly beneath the button you use to trigger slideToggle. I would like to find a way to slideToggle the div, and then have the window scroll to the nav button, automatically displaying the entire previously hidden div.
<a href="#"> doesn't work as it tries to jump to the element before the slideToggle function has executed. Is there a way to have the window scroll to the element after slideToggle has completed?
You can see what I have so far here.
Click on the printables button to see what I'm talking about.
I also created a jsFiddle of the basic functionality, jsfiddle.
$('a').click(function(event){
event.preventDefault();
$(element).slideToggle(250, function(){
window.location.hash = "#content";
});
});
Should work.
Piggybacking off of Robert's answer, you could clean it up a bit by not using hashes.
$('a').click(function(event){
event.preventDefault();
$a = $(this);
$(element).slideToggle(250, function(){
$(window).scrollTop($a.offset().top);
});
});
The two answers provided by Chad and Robert are both valid, however, I like to write it a bit differently.
Below is an example based on your jsFiddle. The JS is the part you need.
$(function() {
$( "#button" ).on( "click", function() { //Click
$( "#content" ).slideToggle( "slow", function(){
if ($(this).is(":visible")) { //Check to see if element is visible then scroll to it
$('html,body').animate({ //animate the scroll
scrollTop: $(this).offset().top - 25 // the - 25 is to stop the scroll 25px above the element
}, "slow")
}
});
return false; //This works similarly to event.preventDefault(); as it stops the default link behavior
});
});
/* This is for the example */
#button{
display: block;
margin: auto;
margin-top:130px;
height: 50px;
width: 180px;
background-color: #ccc;
}
#content{
display: none;
margin: 0 auto;
height: 1200px;
width: 170px;
background-color: blue;
}
<!-- HTML for example -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
Click to expand content
<div id="content">
</div>
Hi I need the overlay to fade in and out smoothly on mouseenter and on mouseleave. The overlay is set to display none in CSS (as it needs to be like this, it will appear on mouseenter). How can I create a nice fade in effect?
#overlay{
width:300px;
height:161px;
background-color: white;
position: absolute;
display: none;
top: -300px;
left: 150px;
}
var xlImgOverlay = $('overlay');
// overlay for showing larger images
$$('.s_img .img_wrapper img').addEvents({
mouseenter: function(){
var xlImg = this.getAttribute('data-xl-img');
console.log(xlImg);
var xlImgEl = new Image();
xlImgEl.src = xlImg;
xlImgOverlay.grab(xlImgEl, 'top');
xlImgOverlay.setStyle('display', 'block');
el.setStyle('opacity', '0.7');
console.log(xlImgOverlay);
xlImgOverlay.fade('in', 500);
},
mouseleave: function(){
xlImgOverlay.fade('out', 500);
xlImgOverlay.empty();
xlImgOverlay.setStyle('display', 'none');
el.setStyle('opacity', '1');
}
});
You can't use display: none and mouseenter together. Your best bet to to put the mouseenter/mouseleave events on .img_wrapper instead of the image itself that way the events will actually fire.