I want to appy a hover effect to div boxes, may be up to 60 boxes on a page. It should be quite equal to the css hover effect but I want to apply a fade effect to the hover color. E.g. I have light green as background color and dark green as hover background color, then it should fade from the one to the other side.
I played a bit around with jQuery but could get the result that I wanted:
$(".box").hover(function() {
$(this).animate({ backgroundColor: "#68BFEF" }, 1000);
},function() {
$(this).animate({ backgroundColor: "#68BFEF" }, 500);
});
You need to use a decent color plug-in. See jQuery animate backgroundColor for more information.
Also, your original code is not really going to do anything, as you want it to animate to another colour afterwards.
$(".box").each( function () {
$(this).data('baseColor',$(this).css('color'));
$(this).hover(function() {
$(this).animate({ backgroundColor: "#68BFEF" }, 1000);
},function() {
$(this).animate({ backgroundColor: $(this).data('baseColor') }, 500);
});
});
EDIT: see http://jsfiddle.net/eHXNq/2/ for example.
I don't have much experience with jQuery, but it looks like just a copy-and-paste mistake, since you have the same color in both .animate()s
I believe you are not using the hover function like you should. the second function is used when the user leave the box so your should return to the original color.
White for example:
$(".box").hover(function() {
$(this).animate({ backgroundColor: "#68BFEF" }, 1000);
},function() {
$(this).animate({ backgroundColor: "#FFFFFF" }, 500);
});
$(".box").hover(
function () {
// this is mouseover
},
function () {
// this is mouse out
}
);
see example here
http://jsfiddle.net/krRse/
review this code, I think this might help you!!!
<!DOCTYPE html>
<html>
<head>
<style>
ul { margin-left:20px; color:blue; }
li { cursor:default; }
span { color:red; }
</style>
<script src="http://code.jquery.com/jquery-1.4.4.js"></script>
</head>
<body>
<ul>
<li>Milk</li>
<li>Bread</li>
<li class='fade'>Chips</li>
<li class='fade'>Socks</li>
</ul>
<script>
$("li").hover(
function () {
$(this).append($("<span> ***</span>"));
},
function () {
$(this).find("span:last").remove();
}
);
//li with fade class
$("li.fade").hover(function(){$(this).fadeOut(100);$(this).fadeIn(500);});
</script>
</body>
</html>
take a look at this link too,
http://api.jquery.com/hover/
60 boxes? Please use event delegation, or live.
Related
Have a look at the following JQuery code:
function my_hover()
{
$( "#up,#down" ).hover(
function() {
$("#up").animate({
"background-color": "#020306"
});
$("#down").animate({
"background-color": "#171716"
});
},
function() {
$("#up").css("background-color","#C8CACF" );
$("#down").css("background-color","#FAFAF8" );
}
);
}
There are two divs: #up,#down which I cannot wrap into a parent div(due to design restrictions). What I want to do is to animate the change in background color whenever #up or #down are being hovered. However, in case the mouse leaves one div by going directly to the other(the two divs are stuck together vertically) I do not want the last two lines of the above code being applied. I want them to be applied only when mouse hovers out from both divs. How may I achieve that? At users.sch.gr/ellhn you may see what is happening with the above code in the first left rectangle with the target photo (transition between up and down provokes change of color and that's not desirable).
Thank you
Try this.
HTML
<div id="up">Up</div>
<div id="down">down</div>
CSS
div{ transition:all 0.25s ease-in-out;}
#up{background:#C8CACF;}
#down{background:#FAFAF8;}
#up.up-hover{background-color:green;}
#down.down-hover{background-color:yellow;}
Script
$('#up, #down').mouseenter(function(){
//alert('hi')
$("#up").addClass('up-hover');
$("#down").addClass('down-hover');
})
.mouseleave(function(){
//alert('hi')
$("#up").removeClass('up-hover');
$("#down").removeClass('down-hover');
});
Fiddle Demo
Using the technique #nnnnn alluded to, e.g., using a timeout:
(function init() {
var $up = $('#up'),
$down = $('#down'),
hovered = false;
$up.hover(over, out);
$down.hover(over, out);
function over() {
hovered = true;
$up.css({
"background-color": "#020306"
});
$down.css({
"background-color": "#171716"
});
}
function out() {
setTimeout(function to() {
if (!hovered) {
$up.css("background-color", "#C8CACF");
$down.css("background-color", "#FAFAF8");
}
}, 1000);
hovered = false;
}
})();
http://jsfiddle.net/TudqT/3/
And with the elements inline next to each other, instead of vertically aligned:
http://jsfiddle.net/TudqT/5/
I want to get an highlighting effect on some various div container while the rest of the site should be dampened down in opacity including the background-image.
Any idea?
Why does this code not work? tried .hover() instead of .mouseover() too but the function won't react on any input...
$(function () {
$('body').mouseover(function () {
$('body').prop({
"background-color": "red";
});
});
});
Another try would be to set a frame around the body tag in the html and then set props to that frame while the hovered frame is in normal state but I have no idea how to do this. Just beginning with js dev. :)
EDIT: did a fail...
$(function () {
$('body').mouseover(function () {
$('body').css({
"opacity": "0.3";
});
});
});
should be that way...
any way to apply the opacity to the background image too?!
fiddle Demo
Use .css()
Set one or more CSS properties for the set of matched elements.
$(function () {
$('body').mouseover(function () {
$(this).css({
"background-color": "red"
});
//or $(this).css("background-color","red");
});
});
this
.prop()
Set one or more properties for the set of matched elements.
.prop() will set the property for a particular element. In your case you have to use .css() to set the style. Please read .prop() and .css() to see the difference.
Try this,
$(function(){
$('body').mouseover(function(){
$(this).css({"background-color":"red"});
});
});
DEMO
Here's a FIDDLE
body {
background: gray;
min-height: 1000px; /* For demo purposes */
}
css
$(function() {
$('body').on('mouseover', function() {
$(this).css({ backgroundColor: 'red' });
});
});
animate
$(function() {
$('body').on('mouseover', function() {
$(this).animate({ backgroundColor: 'red' }, 600);
});
});
*Note: For some reason it doesn't work with jQuery 1.x(edge).
I think this is what you might want: a "dim" DIV element that adds a semi transparent black box on the entire page, that puts itself "below" the DIV you want to highlight, and then some javascript to turn it off and on, and rearrange the z indexes. The HTML would look something like this:
this is some text
<div id="div1" class="dimmable">hello</div>
<div id="div2" class="dimmable">goodbye</div>
<div id="dim"></div>
And then the JS:
$('div.dimmable').hover(function() {
$(this).css('z-index', 101);
$('#dim')
.css('z-index', 100)
.width($(window).innerWidth())
.height($(window).innerHeight())
.fadeIn();
}, function() {
var dimmable = $(this);
$('#dim').fadeOut({complete: function() {
dimmable.css('z-index', 99);
}});
});
You can see it working here.
A slight catch: the DIVs need to have position:relative, otherwise you can't change their z-indexes and you can't put them on top of the "dim" DIV. Also, anything with a higher z-index will not stay behind the "dim", of course, but you can just use higher numbers as a workaround.
Im trying to show a popup when the mouse is over a li element.
My popup got an animation (get visible with fading, comes up, then comes down)
The problem is that my popup's animation seems to be in a endless loops while the mouse is over the li.
I got alot's of li element and I made a process to give them automatics ID, passing them in a 'for' loop.
My code IMPORTANT EDIT SORRY
echo"<li id='".$li_id_name.$li_id."' onmouseover='showpopup(this)'>";
echo"<div id='".$li_id_name.$li_id."detail'>SOME TEXT</div>";
echo"</li>";
Javascript / jQuery
function showpopup(obj) {
d3.select('#'+$(obj).attr('id')+"detail").transition().duration(100).style('opacity','1').each('end', function() {
d3.select('#'+$(obj).attr('id')+"detail").transition().duration(100).style('margin-top','-300px').each('end', function() {
d3.select('#'+$(obj).attr('id')+"detail").transition().duration(500).style('margin-top','-250px');
});
});
}
SORRY I DID A MISTAKE IN MY CODE, in fact, the popup is a div inside the li element
just use mouseenter instead of mouseover
html
LI1
LI2
LI3
js
$('.assignenter').mouseenter(function(){
//What to do..
});
Try a look at this http://jsfiddle.net/V3xw8/
Try like this
HTML :
<ul>
<li class="assignenter">LI1</li>
<li class="assignenter">LI2</li>
<li class="assignenter">LI3</li>
</ul>
CSS :
.assignenter{
display:block;
padding:20px;
background:green;
color:#fff;
}
jQuery/JS
$("li.assignenter").on( "mouseenter", function() {
$(this).css({
"background-color": "red",
"font-weight": "bolder"
});
}).on( "mouseleave", function() {
var styles = {
backgroundColor : "green",
fontWeight: ""
};
$(this).css( styles );
});
Hope this will solve your problem
Let's say I have a little hover function on three boxes. When I hover over one, it animates and changes the background color. When the page loads, I want one to already be animated. If I hover on another box, it will disappear and then just animate whichever is hovered on.
Here is the JSFiddle
jQuery:
$(document).ready(function(){
$('.box').hover(function(){
$(this).stop().animate({
backgroundColor: "red"
}, 800);
},
function(){
$(this).stop().animate({
backgroundColor: "green"
}, 800);
});
});
Now how can animate the middle box when the page loads. Then allow the hover to work as normal (which includes the middle box animating back to normal).
You may try this
$(document).ready(function(){
$('.box').eq(1).animate({
backgroundColor: "red"
}, 800);
$('.box').hover(function(){
$('.box').stop().animate({
backgroundColor: "green"
}, 800);
$(this).stop().animate({
backgroundColor: "red"
}, 800);
},
function(){
$(this).stop().animate({
backgroundColor: "green"
}, 800);
});
});
DEMO.
Use a custom class:
$(document).ready(function(){
$('.box').hover(
function(){
$(this).stop().animate({
backgroundColor: "red"
}, 800,function(){
$('.box').removeClass('.animated');
})
},
function(){
$(this).stop().animate({
backgroundColor: "green"
}, 800);
});
})
The CSS:
.animated { background:red;}
You could experiment with where you want to put the removeClass. It may be better to add a function like the following:
$('.box').one('mouseover',function(e){
$('.box').removeClass('.animated');
})
I actually like that better, because it only fires once, but the difference is probably negligible. You could also take the function off the end of the first animate, and stick the line before the animate function is called. My guess is the way I suggested would be the smoothest looking. But, all ways will work.
I am new to jquery and am stuck trying to select an image inside a div.
<div class="div-main">
<div class="title"></div>
<div class="description"></div>
<img class="post-thumb" src="img.jpg"/>
</div>
I am trying to make the title and description show only when the the user hovers over the image in the div.
Currently I have it setup so that the animations happen when the div-main is hovered over
$(document).ready(function(){
$(".div-main").hover(
function () {
$(this).children(".title").fadeIn("slow");
$(this).children(".description").fadeIn("slow");
$(".div-main").css({ opacity: 0.1 });
$(this).css({ opacity: 1.0 });
$(this).show();
},
function () {
$(".title").hide();
$(".description").hide();
$(".div-main").fadeIn("fast");
$(".div-main").css({ opacity: 1.0 });
}
);
});
jsBin demo
$(".div-main").hover(
function () {
$(".title, .description", this).fadeTo(300, 1);
$(".div-main").stop().fadeTo(0, 0.3);
$(this).fadeTo(300,1);
},function () {
$(".title, .description").hide();
$(".div-main").stop().fadeTo(300, 1);
});
I have decided to post this as an answer.
$('.div-main > img')
.hover(function(){
$(this).parent().find(".title, .description").fadeIn(); //Title & description
},
function(){
$(this).parent().find(".title, .description").fadeOut();
}
);
To make the description and title fade in and out when you hover over the image, you could do this:
$('.div-main .post-thumb').hover(function(){
$(this).parent().find(".title, .description").stop(true).fadeIn();
},
function() {
$(this).parent().find(".title, .description").stop(true).fadeOut();
});
If the image is normally the only visible content except when hovering, then this might work better because things would remain visible when hovering over the title and description too:
$('.div-main').hover(function(){
$(this).find(".title, .description").stop(true).fadeIn();
},
function() {
$(this).find(".title, .description").stop(true).fadeOut();
});